Advanced Search

Google Maps w/ multiple infoWindows

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

Expand | Embed | Plain Text

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.