Google Maps Multiple Markers


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

Multiple markers function for Google Maps API V3


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.