Google Maps w/ multiple infoWindows


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <div id="gloveMap" style="height:400px;width:320px;display:block;">
  2. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
  3. </script>
  4. <script type="text/javascript">
  5. function mapIt(){
  6.  
  7. var latlng = new google.maps.LatLng(36.728058, -108.218686);
  8. var myOptions = {
  9. zoom: 11,
  10. center: latlng,
  11. mapTypeId: google.maps.MapTypeId.ROADMAP,
  12. }
  13. var map = new google.maps.Map(document.getElementById('gloveMap'), myOptions);
  14. setMarkers(map, places);
  15. }
  16.  
  17. var places = [
  18. ['Station 1', 36.732281, -108.211212],
  19. ['Station 2',36.764225,-108.148329],
  20. ['Station 3',36.738504,-108.229113],
  21. ['Station 4',36.723368,-108.168837],
  22. ['Station 5',36.75534,-108.197532],
  23. ['Station 6',36.734918,-108.249559],
  24. ['The Daily Times',36.730449,-108.206899],
  25. ];
  26.  
  27. var popUps = [
  28. '<strong>Farmington Fire Station 1</strong><br />301 N. Auburn',
  29. '<strong>Farmington Fire Station 2</strong><br />3800 English Road',
  30. '<strong>Farmington Fire Station 3</strong><br />1401 W. Navajo',
  31. '<strong>Farmington Fire Station 4</strong><br />790 S. Hutton',
  32. '<strong>Farmington Fire Station 5</strong><br />609 E. 30th',
  33. '<strong>Farmington Fire Station 6</strong><br />3101 W. Main',
  34. '<strong>The Daily Times</strong><br />301 N. Allen'
  35. ]
  36.  
  37.  
  38. var infowindow;
  39. function setMarkers(map, locations) {
  40.  
  41. for (var i = 0; i < places.length; i++) {
  42. var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
  43. var marker = new google.maps.Marker({
  44. position: myLatLng,
  45. map: map,
  46. title: locations[i][0],
  47. });
  48. (function(i, marker) {
  49. google.maps.event.addListener(marker,'click',function() {
  50. if (!infowindow) {
  51. infowindow = new google.maps.InfoWindow();
  52. }
  53. infowindow.setContent(popUps[i]);
  54. infowindow.open(map, marker);
  55. });
  56. })(i, marker);
  57. }
  58. };
  59. mapIt();

URL: daily-times.com/glovewithlove

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.