Databases
StackOverflow2013
Postsdbo
POMultiple Markers for Google Maps API V3 With Custom Icon
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiple Markers for Google Maps API V3 With Custom Icon
    text
    copied!<p>I'm having problems with making multiple markers appear on my Google Map. I've been trying stuff from all over the internet but most of the time the map just breaks.</p> <p>EDIT: I managed to get the multiple markers going. I now only need to add the info windows to each.</p> <p>My updated code is as follows:</p> <pre><code>&lt;script type="text/javascript"&gt; function initialize() { latLngs = [ new google.maps.LatLng(44.3118328, -79.5549532), new google.maps.LatLng(44.3118325, -80.5549533), new google.maps.LatLng(44.3118326, -81.5549534), new google.maps.LatLng(44.3118327, -82.5549535) ]; var latlng = new google.maps.LatLng(44.3118328, -79.5549532); var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var contentString = '&lt;div id="mapinfowindow"&gt;'+'1970 Thompson St &lt;br&gt; Innisfil' + '&lt;br&gt;' + '$329,900' +'&lt;a href="http://www.something.com/Featured_Listings_files/1970%20Thompson%20-%20Brochure.pdf"&gt;&lt;br&gt;&lt;br&gt;View Brochure&lt;/a&gt;&lt;/div&gt;'; var infowindow = new google.maps.InfoWindow({ content: contentString, }); var image = new google.maps.MarkerImage( 'images/marker.png', new google.maps.Size(50,50), new google.maps.Point(0,0), new google.maps.Point(25,50) ); var shadow = new google.maps.MarkerImage( 'images/markershadow.png', new google.maps.Size(78,50), new google.maps.Point(0,0), new google.maps.Point(25,50) ); var shape = { coord: [28,3,32,4,35,5,37,6,38,7,39,8,40,9,42,10,42,11,43,12,44,13,44,14,44,15,45,16,45,17,45,18,45,19,45,20,45,21,45,22,45,23,44,24,44,25,44,26,43,27,43,28,42,29,41,30,41,31,40,32,39,33,39,34,38,35,37,36,36,37,35,38,34,39,33,40,32,41,31,42,30,43,29,44,28,45,26,46,24,47,24,47,22,46,21,45,19,44,18,43,17,42,16,41,15,40,14,39,13,38,12,37,12,36,11,35,10,34,9,33,9,32,8,31,7,30,7,29,6,28,5,27,5,26,4,25,4,24,4,23,4,22,3,21,3,20,3,19,3,18,4,17,4,16,4,15,4,14,5,13,6,12,6,11,7,10,8,9,9,8,10,7,12,6,14,5,16,4,20,3,28,3], type: 'poly' }; var markers = new Array(latLngs.length); for (var i = 0; i &lt; markers.length; i++) { markers[i] = new google.maps.Marker({ position: latLngs[i], title:"Marker "+i, icon: image, shadow: shadow, map: map, shape: shape }); markers[i].setMap(map); } for (var i2 = 0; i2 &lt; markers.length; i2++) { google.maps.event.addListener(markers[i2], 'click', function() { infowindow.open(map,markers[i2]); }); } } </code></pre> <p>I now need to add the info windows to each marker each with its unique content inside the window.</p> <p>Thank you for your time.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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