Google Maps API: open url by clicking on marker

google-maps, google-maps-api-3, google-maps-markers, javascript

Solution

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.

Problem

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?

Original source