Bagaimana Cara Mengatur Focus Infowindow Google Maps API ?

Selamat siang, bagaimana ya cara mengatur focus infowindow google maps.

Saat ini, ktika saya klik salah satu marker, sudah bisa memunculkan infowindow dengan data dari marker tersebut.

marker 2.jpg

Dan ketika saya klik marker yang lainnya, juga sudah menampilkan data dari marker tersebut. Tapi infowindow masih berfokus di marker yang sama.

bagaimana cara mengaturnya, biar bisa fokus di marker trsebut ? trimakasih

Berikut kode yang telah saya buat

<script>
    function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 10,
            center: { lat: -6.261493, lng: 106.810600 },
    });

    setMarkers(map);
    }

    const locations = @php print_r(json_encode($markers)) @endphp;

    function setMarkers(map) {

    for (let i = 0; i < locations.length; i++) {

        const location  = locations[i];

        let html = "";
        html += `<div id="content-${location[0]}">`;
        html += `<div id="siteNotice">`;
        html += `</div>`;
        html += `<h1 id="firstHeading" class="firstHeading">${location[1]}</h1>`;
        html += `<div id="bodyContent">`;
        html += `<p>${location[2]}</p>`;
        html += `<a href="reports/show/${location[0]}" class="btn btn-dark btn-sm">Detail</a>`;
        html += `</div>`;
        html += `</div>`;

        const infowindow = new google.maps.InfoWindow({
            content: html,
        });

        marker = new google.maps.Marker({
        position: { lat: parseFloat(location[4]), lng: parseFloat(location[5]) },
        map,
        title: location[3]
        });

        marker.addListener("click", () => {
            infowindow.open({
            anchor: marker,
            map,
            shouldFocus: true,
            });
        });

        console.log(location);

        }
    }
</script>

javascript api laravel

@hilmih3101

38 Kontribusi 23 Poin

Diperbarui 2 tahun yang lalu

Tanggapan

Dulu saya pernah nyoba bikin kaya gitu persis, pake php native, nanti saya share kalo udha ketemu file projectnya.

@ahanafi

2 Jawaban:

<div>Hai mas <a href="https://sekolahkoding.com/user/hilmih3101">@hilmih3101</a><br>Saya coba bantu jawab ya<br><br></div><div>penyebab markernya berfokus pada anchor yang sama yaitu karena peletakkan syntax di bawah ini ada di dalam function looping<br><br></div><pre> <em>const</em> infowindow = new google.maps.InfoWindow({ content: html, });</pre><div><br>coba di keluarin dari looping dulu mas untuk Infowindownya, dan bisa di tulis seperti berikut<br><br></div><pre>const infowindow = new google.maps.InfoWindow();</pre><div><br>dan untuk full scriptnya bisa seperti beriku :<br><br></div><pre><script> <em>function</em> initMap() { <em>const</em> map = new google.maps.Map(document.getElementById("map"), { zoom: 10, center: { lat: -6.261493, lng: 106.810600 }, });

setMarkers(map);
}

&lt;em&gt;const&lt;/em&gt; locations = @php print_r(json_encode($markers)) @endphp;

&lt;em&gt;function&lt;/em&gt; setMarkers(&lt;em&gt;map&lt;/em&gt;) {

   const infowindow = new google.maps.InfoWindow();

   for (&lt;em&gt;let&lt;/em&gt; i = 0; i &amp;lt; locations.length; i++) {
    
      &lt;em&gt;const&lt;/em&gt; location  = locations[i];

      &lt;em&gt;let&lt;/em&gt; html = &quot;&quot;;
      html += `&amp;lt;div id=&quot;content-${location[0]}&quot;&amp;gt;`;
      html += `&amp;lt;div id=&quot;siteNotice&quot;&amp;gt;`;
      html += `&amp;lt;/div&amp;gt;`;
      html += `&amp;lt;h1 id=&quot;firstHeading&quot; class=&quot;firstHeading&quot;&amp;gt;${location[1]}&amp;lt;/h1&amp;gt;`;
      html += `&amp;lt;div id=&quot;bodyContent&quot;&amp;gt;`;
      html += `&amp;lt;p&amp;gt;${location[2]}&amp;lt;/p&amp;gt;`;
      html += `&amp;lt;a href=&quot;reports/show/${location[0]}&quot; class=&quot;btn btn-dark btn-sm&quot;&amp;gt;Detail&amp;lt;/a&amp;gt;`;
      html += `&amp;lt;/div&amp;gt;`;
      html += `&amp;lt;/div&amp;gt;`;

      marker = new google.maps.Marker({
         position: { lat: parseFloat(location[4]), lng: parseFloat(location[5]) },
         map,
         title: location[3]
      });

      marker.addListener(&quot;click&quot;, () =&amp;gt; {
         infowindow.setContent(html);
         infowindow.open({
          anchor: marker,
          map
         });
      });

       console.log(location);

   }
}

</script></pre><div><br>semoga mambantu :)</div>

@tantootnat

14 Kontribusi 11 Poin

Dipost 2 tahun yang lalu

Tanggapan

thx mas @tantootnat, sy coba masih belum bisa

@hilmih3101

Jawaban Terpilih

<div>Case ini sudah selesai dengan mengubah scriptnya menjadi seperti ini.</div><pre><script> <em>function</em> initMap() { <em>var</em> myLatLng = { lat: -6.261493, lng: 106.810600 };

    &lt;em&gt;var&lt;/em&gt; map = new google.maps.Map(document.getElementById(&#039;map&#039;), {
        zoom: 4,
        center: myLatLng
    });

    &lt;em&gt;var&lt;/em&gt; infowindow = new google.maps.InfoWindow({});
    
    setMarkers(map);

}
    
&lt;em&gt;var&lt;/em&gt; locations = @php print_r(json_encode($markers)) @endphp;


&lt;em&gt;function&lt;/em&gt; setMarkers(&lt;em&gt;map&lt;/em&gt;) {
    &lt;em&gt;var&lt;/em&gt; bounds = new google.maps.LatLngBounds();
    for (&lt;em&gt;var&lt;/em&gt; i = 0; i &amp;lt; locations.length; i++) {
        &lt;em&gt;var&lt;/em&gt; location = locations[i];
        &lt;em&gt;var&lt;/em&gt; marker;

        &lt;em&gt;var&lt;/em&gt; contentString =
            &#039;&amp;lt;div id=&quot;content&quot;&amp;gt;&#039; +
            &#039;&amp;lt;div id=&quot;siteNotice&quot;&amp;gt;&#039; +
            &quot;&amp;lt;/div&amp;gt;&quot; +
            &#039;&amp;lt;h1 id=&quot;firstHeading&quot; class=&quot;firstHeading&quot;&amp;gt;&#039;+location[1]+&#039;&amp;lt;/h1&amp;gt;&#039; +
            &#039;&amp;lt;div id=&quot;bodyContent&quot;&amp;gt;&#039; +
            &#039;&amp;lt;p&amp;gt;&#039; + location[2] + &#039;&amp;lt;/p&amp;gt;&#039; +
            &#039;&amp;lt;small class=&quot;text-muted&quot;&amp;gt; Reported by&#039; + location[6] + &#039;&amp;lt;/small&amp;gt;&#039; +
            &#039;&amp;lt;br&amp;gt;&amp;lt;br&amp;gt;&#039; +
            &#039;&amp;lt;a href=&quot;reports/show/&#039;+location[0]+&#039;&quot; class=&quot;btn btn-dark btn-sm&quot;&amp;gt;Detail&amp;lt;/a&amp;gt;&#039; +
            &#039;&amp;lt;/div&amp;gt;&#039; +
            &#039;&amp;lt;/div&amp;gt;&#039;;


        &lt;em&gt;var&lt;/em&gt; infoWindow = new google.maps.InfoWindow({
            content: contentString
        });

        marker = new google.maps.Marker({
            position: {
                lat: parseFloat(location[4]),
                lng: parseFloat(location[5])
            },
            map: map,
            info: contentString,
        });
        
        bounds.extend(marker.getPosition());
        
        google.maps.event.addListener(marker, &#039;click&#039;, &lt;em&gt;function&lt;/em&gt;() {
        
        infoWindow.setContent(&lt;em&gt;this&lt;/em&gt;.info);
        
        infoWindow.open(map, &lt;em&gt;this&lt;/em&gt;);
        });
    }
    map.fitBounds(bounds);
}

</script></pre>

@hilmih3101

38 Kontribusi 23 Poin

Dipost 2 tahun yang lalu

Kelas Premium! Belajar Javascript untuk website

Bagaimana Cara Mengatur Focus Infowindow Google Maps API ?

Kelas Premium!
Belajar Javascript untuk website