Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is the simplest I could reduce it to:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;Google Maps Multiple Markers&lt;/title&gt; &lt;script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="map" style="width: 500px; height: 400px;"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(-33.92, 151.25), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i &lt; locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Screenshot:</p> <p><img src="https://i.imgur.com/mM82YXg.png" alt="Google Maps Multiple Markers"></p> <p>There is some closure magic happening when passing the callback argument to the <code>addListener</code> method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:</p> <ul> <li><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Closures" rel="noreferrer">Mozilla Dev Center: Working with Closures</a></li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload