I am using Google Maps for my website and I wander how can I use the Markers as links? I mean when I click a marker to open a particular link.
Thank you in advance!
That's actually very easy to do. Simply attach an event handler to your marker, and then launch the link by setting window.location.href to your URL. Check out the following examples, which I think should be self explanatory:
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 the V2 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?file=api&v=2&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'll be forwarded to a popular search engine.
