All geek questions in one place

Google Maps marker as a link

I use Google Maps for my site and I wander, how can I use Markers as links? I mean when I click the marker to open a specific link.

Thank you in advance!

+4
source share
2 answers

It is really very easy to do. Just attach an event handler to your marker, and then run the link by setting window.location.href to your URL. Check out the following examples, which I think should be clear:

Using the v3 API :

 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google Maps Marker as a Link</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <div id="map" style="width: 500px; height: 400px;"></div> <script type="text/javascript"> var map = new google.maps.Map(document.getElementById('map'), { zoom: 2, center: new google.maps.LatLng(35.55, -25.75), mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ position: map.getCenter(), url: 'http://www.google.com/', map: map }); google.maps.event.addListener(marker, 'click', function() { window.location.href = marker.url; }); </script> </body> </html>

Using API V2 :

 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps Marker as a Link</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" type="text/javascript"></script> </head> <body onunload="GUnload()"> <div id="map" style="width: 500px; height: 400px;"></div> <script type="text/javascript"> var map = new GMap2(document.getElementById("map")); var centerPoint = new GLatLng(35.55, -25.75); map.setCenter(centerPoint, 2); var marker = new GMarker(map.getCenter()); marker.url = 'http://www.google.com/'; map.addOverlay(marker); GEvent.addListener(marker, 'click', function() { window.location.href = marker.url; }); </script> </body> </html>

The above examples will add a marker somewhere in the Atlantic Ocean. When you click on it, you will be redirected to a popular search engine.

+10
source

To open this tab in a new tab, add the following after "window.location.href = marker.url;":

 window.open(this.url, '_blank');

So you will have:

 google.maps.event.addListener(marker, 'click', function() { window.location.href = marker.url; window.open(this.url, '_blank'); });
+2
source

Source: https://habr.com/ru/post/1313014/

More articles:


All Articles