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:
- Create an array of data describing each marker.
- Type the function, which adds a marker based on the details in an entry of that array.
- 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