Google Maps API open url by clicking on marker

Question

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    lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta name  viewport  content  initial-scale 1 0  user-scalable no    gt        lt style type  text css  gt          html   height  100            body   height  100   margin  0  padding  0            map canvas   height  100         lt  style gt        lt script type  text javascript  src  http   maps googleapis com maps api js sensor false  gt  lt  script gt        lt script type  text javascript  gt      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  lt  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              lt  script gt   lt  head gt    lt body onload  initialize    gt       lt div id  map canvas  style  width 50   height 50   gt  lt  div gt   lt  body gt   lt  html gt    How to open url by clicking on marker with code above

User · Accepted Answer

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.

User · Answer

If anyone wants to add an URL on a single marker which not require for loops  here is how it goes   if      googleMap   length        var initialize   function             var mapOptions                 zoom  15              scrollwheel  false              center  new google maps LatLng 45 725788  -73 5120818               styles                     stylers                         saturation  -100                                                      var map   new google maps Map document getElementById  googleMap    mapOptions           var marker   new google maps Marker               position  map getCenter                animation  google maps Animation BOUNCE              icon   example-marker png               map  map              url   https   example com                         Add an url to the marker     google maps event addListener marker   click   function             window location href   this url                       Add the map initialize function to the window load function     google maps event addDomListener window   load   initialize

User · Answer

function loadMarkers                 for location in object list                  var point   new google maps LatLng   location latitude     location longitude                   var marker   new google maps Marker                 position  point                map  map                url    location id                             google maps event addDomListener marker   click   function                   window location href   this url                    endfor

User · Answer

google maps event addListener marker   click    function marker  i      return function         window location href   marker url         marker  i

User · Answer

url isn t an object on the Marker class   But there s nothing stopping you adding that as a property to that class   I m guessing whatever example you were looking at did that too   Do you want a different URL for each marker   What happens when you do   for  var i   0  i  lt  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           url    your url                google maps event addListener marker   click   function             window location href   this url

User · Answer

the previous answers didn t work out for me well  I had persisting problems by setting the marker  So i changed the code slightly       lt  DOCTYPE html gt      lt html gt      lt head gt        lt meta http-equiv  content-type  content  text html  charset ANSI    gt        lt title gt Google Maps Multiple Markers lt  title gt        lt script src  http   maps google com maps api js sensor false        type  text javascript  gt  lt  script gt      lt  head gt      lt body gt        lt div id  map  style  width  1500px  height  1000px   gt  lt  div gt         lt script type  text javascript  gt         var locations                Goettingen    51 54128040000001   9 915803500000038   http   www google de               Kassel   51 31271139999999   9 479746100000057 0   http   www stackoverflow com               Witzenhausen   51 33996819999999   9 855564299999969 0   www http   developer mozilla org de         var map   new google maps Map document getElementById  map        zoom  10   center  new google maps LatLng 51 54376  9 910419999999931    mapTypeId  google maps MapTypeId ROADMAP      var infowindow   new google maps InfoWindow     var marker  i   for  i   0  i  lt  locations length  i        marker   new google maps Marker      position  new google maps LatLng locations i  1   locations i  2       map  map     url  locations i  4          google maps event addListener marker   mouseover    function marker  i       return function          infowindow setContent locations i  0         infowindow open map  marker            marker  i           google maps event addListener marker   click    function marker  i       return function          infowindow setContent locations i  0         infowindow open map  marker        window location href   this url           marker  i                  lt  script gt      lt  body gt      lt  html gt    This way worked out for me   You can create Google Maps routing links from your Datebase to to use it as an interactive routing map

[javascript] Google Maps API: open url by clicking on marker

Examples related to javascript

Examples related to google-maps

Examples related to google-maps-api-3

Examples related to google-maps-markers