Advanced Search

Google Maps Multiple Markers

/ Published in: jQuery
Save to your folder(s)
Multiple markers function for Google Maps API V3

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. var map = {
  2. 	init: function(){
  3. 		var $map = $('#map');
  4. 		var config = {
  5. 			zoom: 9,
  6. 			center: new google.maps.LatLng(52.376063,0.251936),
  7. 			mapTypeId: google.maps.MapTypeId.ROADMAP
  8. 		};
  9. 		var map = new google.maps.Map(document.getElementById("map"),config);
  10. 		switch($map.parent().attr('id')){
  11. 			case 'hf':
  12. 			  	var markers = [
  13. 					["Cambridge", "Queen Anne House", "Gonville Place<br />Cambridge<br />CB1 1ND", "52.20078", "0.12938"], 
  14. 					["Peterborough", "The Cresset", "Rightwell<br />Bretton<br />Peterborough<br />PE3 8DX", "52.58930", "-0.28354"]
  15. 				];	
  16. 			  break;
  17. 			default:
  18. 			  	var markers = [
  19. 					["Cambridge", "Queen Anne House", "Gonville Place<br />Cambridge<br />CB1 1ND", "52.20078", "0.12938"], 
  20. 					["Peterborough", "The Cresset", "Rightwell<br />Bretton<br />Peterborough<br />PE3 8DX", "52.58930", "-0.28354"],
  21. 					["Peterborough", "Haward House", "Rightwell<br />East Bretton<br />Centre Bretton<br />Peterborough<br />PE3 8DX", "52.58930", "-0.28354"],
  22. 					["Peterborough", "Time Stop", "101 Wellington Street<br />Eastgate<br />Peterborough<br />PE1 5DU", "52.57414", "-0.23098"],
  23. 					["Wisbech", "Wisbech", "4-6 Stermyn Street<br />Wisbech<br />Cambridgeshire<br />PE13 1EQ", "52.66388", "0.16319"]
  24. 				];	
  25. 		}
  26. 		this.markers(map, markers);
  27. 	},
  28. 	markers: function(map, markers){
  29. 		var infowindow = new google.maps.InfoWindow();
  30. 		for(var i=0;i<markers.length;i++) {	
  31. 			var city = markers[i][0], name = markers[i][1], address = markers[i][2];
  32. 			var latlngset = new google.maps.LatLng(markers[i][3], markers[i][4]);
  33. 			var marker = new google.maps.Marker({  
  34. 				map: map,  
  35. 				title: name,
  36. 				icon: folder+'/img/contact-marker.png',  
  37. 				position: latlngset,
  38. 				content: '<div class="infowindow"><strong>' + city + '</strong><p>' + name + '<br />' + address + '</p><a href="http://maps.google.com/?daddr=' + address.replace(/<br\s*[\/]?>/gi,',') + '" target="_blank">Get Directions</a></div>'
  39. 			});
  40. 			google.maps.event.addListener(marker, 'click', function () {
  41. 				infowindow.setContent(this.content);
  42. 				infowindow.open(map, this);
  43. 			});
  44. 	    }
  45. 	}
  46. };

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.