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?
This question is related to
javascript
google-maps
google-maps-api-3
google-maps-markers
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 %}
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
window.location.href = marker.url;
}
})(marker, i));
the previous answers didn't work out for me well. I had persisting problems by setting the marker. So i changed the code slightly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ANSI" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 1500px; height: 1000px;"></div>
<script type="text/javascript">
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 < 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));
}
</script>
</body>
</html>
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.
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);
}
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 < 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;
});
}
Source: Stackoverflow.com