Thursday, 15 July 2010

More Efficient Way to Add Markers to Google Maps v3 -


I am developing this JS programmatically. Each marker is being represented as different variables like markers, markers, etc. ... this works but there is a way to generate markers & amp; More efficient / elegant information windows windows?

  & lt; Script type = "text / javascript" & gt; Var map; Initialize function () {var mapOptions = {zoom: 8, center: new google.maps.LatLng (41.056,466, -85.33,12,00 9), mapTypeId: google.maps.MapTypeId.ROADMAP} Top map = new google.maps.Map (document. GetElementById ("map-canvas"), map options); // ************************************************************************************************* **************************************************************************************************** ******************* ****** ContentString_0 = '& lt; ************************** Strong> Club name: Fort Wayne timing corners & lt; / Strong> '; Var infowindow_0 = new google.maps.InfoWindow ({content: contentString_0}); Var image_0 = '/js/markers/marker1.png'; Var Latlng_0 = New google.maps.LatLng (41.057814980291, -85.32985191970 9); Var marker = new google.maps.marker ({status: latlag_0, title: "0", icon: image_0}); Marker_0.setMap (map); Google.maps.event.addListener (Marker_0, 'Click', function () {infowindow_0.open (map, marker_0);}); // ************************************************************************************************* *********** Add 2nd Second Marker ************ ContentString_1 = '& lt; ********************* Strong> Club name: Roanoke & lt; / Strong> ; Var infowindow_1 = new google.maps.InfoWindow ({content: contentString_1}); Var image_1 = '/js/markers/marker2.png'; Var Latlng_1 = new google.maps.LatLng (41.17805990, -85.4436640); Var marker_1 = new google.maps.marker ({status: latlng_1, title: "1", icon: image_1}); Marker_1.setMap (map); Google.maps.event.addListener (Marker_1, 'Click', function () {infowindow_1.open (map, marker_1);}); } Loadscript () {var script = document.createElement ("script"); Script.type = "text / javascript"; Script src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize"; Document.body.appendChild (script); } Window.onload = loadScript; & Lt; / Script & gt;    

"itemprop =" text ">

Yes, you can do this easily:

  1. Create an array of data describing each marker.
  2. Type the function, which adds a marker based on the details in an entry of that array.
  3. Call that function for each entry in that array.

    So only the only dynamic form that is the array of data is; The actual marker code for all markers is shared.

    Like this:

      var map; Places: [places: 41.057814980291, LNG: -85.32 9851 91969, Image: 'marker1', Title: '0', Club: 'Fort Wayne Time Corners'} {Latitude: 41.178,05, 99 0, LNG: -85.44,36,640, Image: 'marker2', Title: '1', Club: 'Roanoke'}]; Initialize function () {var mapOptions = {zoom: 8, center: new google.maps.LatLng (41.056,466, -85.33,12,00 9), mapTypeId: google.maps.MapTypeId.ROADMAP} ; Var map = new google.maps.Map (document.getElementById ("map-canvas"), map options); (Var i = 0; i & lt; places.length; i ++) {ad place (places [ii]); } Function addplace (location) {var content = '& lt; Strong> Club name: '+ place.club +' & lt; / Strong> '; Var infowindow = new google.maps.InfoWindow ({content: content}); Var image = '/ js / marker /' + place.image + '.png'; Var latlng = new google.maps.LatLng (place.lat, place.lng); Var marker = new google.maps.marker ({status: latlng, title: place.title, icon: image}); Marker.setMap (map); Google.maps.event.addListener (Marker, 'Click', function () {infowindow.open (map, marker);}); }} Function load script () {var script = document.createElement ("script"); Script.type = "text / javascript"; Script src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize"; Document.body.appendChild (script); } Window.onload = loadScript;    

No comments:

Post a Comment