Menu
I want to open a new window by clicking on a marker using Google Maps API 3.
Unfortunately there are not many examples for the Google Maps API and I found out this code:
google.maps.event.addListener(marker, 'click', function() { window.location.href = marker.url; }); How to use it, when I create markers with a loop? I tried it in many ways with no afford.
This is my code – I made it simple and short:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var points = [ ['name1', 59.9362384705039, 30.19232525792222, 12], ['name2', 59.941412822085645, 30.263564729357767, 11], ['name3', 59.939177197629455, 30.273554411974955, 10] ]; function setMarkers(map, locations) { var shape = { coord: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly' }; for (var i = 0; i < locations.length; i++) { var flag = new google.maps.MarkerImage('markers/' + (i + 1) + '.png', new google.maps.Size(17, 19), new google.maps.Point(0,0), new google.maps.Point(0, 19)); var place = locations[i]; var myLatLng = new google.maps.LatLng(place[1], place[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: flag, shape: shape, title: place[0], zIndex: place[3] }); } } function initialize() { var myOptions = { center: new google.maps.LatLng(59.91823239768787, 30.243222856188822), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); setMarkers(map, points); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:50%; height:50%"></div> </body> </html> How to open url by clicking on marker with code above?
635
Click Share or embed map. Click Embed map. Copy the text in the box. Paste it into the HTML of your website or blog.
As mentioned, you won't be charged for your Google Maps API usage until you turn on auto-billing. The free trial limits you to $300 in credit over 90 days. API users also get $200 of credit per month toward API requests, equal to 100,000 static map requests or around 28,000 dynamic map requests per month.
You can add a specific url to each point, e.g.:
var points = [ ['name1', 59.9362384705039, 30.19232525792222, 12, 'www.google.com'], ['name2', 59.941412822085645, 30.263564729357767, 11, 'www.amazon.com'], ['name3', 59.939177197629455, 30.273554411974955, 10, 'www.stackoverflow.com'] ]; Add the url to the marker values in the for-loop:
var marker = new google.maps.Marker({ ... zIndex: place[3], url: place[4] }); Then you can add just before to the end of your for-loop:
google.maps.event.addListener(marker, 'click', function() { window.location.href = this.url; }); Also see this example.
87
answered Oct 11 '22 12:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With