Google Maps API 3 を使用してマーカーをクリックして新しいウィンドウを開きたいです。
残念ながら、Google Maps API の例はあまり多くありませんが、次のコードを見つけました。
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
ループ付きのマーカーを作成するときに、どのように使用すればよいですか? 余裕がないので、さまざまな方法を試しました。
これは私のコードです。シンプルで短くしました。
<!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>
上記のコードを使用してマーカーをクリックして URL を開くにはどうすればよいでしょうか?
ベストアンサー1
各ポイントに特定の URL を追加できます。例:
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']
];
for ループ内のマーカー値に URL を追加します。
var marker = new google.maps.Marker({
...
zIndex: place[3],
url: place[4]
});
次に、for ループの直前に次のコードを追加します。
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
こちらもご覧ください例。