• 小
  • 中
  • 大

マーカーのアイコンを指定


地図上に表示されるマーカーに自分で作成したアイコンを指定する方法を確認します。

参照先は:Googleコード>Google Maps JavaScript API V3 オーバーレイ>アイコン>複雑なアイコン


アイコンの種類や影の指定方法のサンプルコードがあります。new google.maps.Markeで指定するimageとshadowを個別に変数に格納し利用する方法です。

var LatLng1 = new google.maps.LatLng(35.71634, 139.51701);
var contentString1 = '小金井公園';
var infowindow1 = new google.maps.InfoWindow({
content: contentString1
});
var image1 = new google.maps.MarkerImage
('http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
//影
var shadow1 = new google.maps.MarkerImage
('http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png',
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
//マーカ追加
var marker1 = new google.maps.Marker({
position: LatLng1,
map: map,
title: "小金井公園",
icon: image1,
shadow: shadow1
});
//クリック
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map, marker1);
});

これでアイコンの作成は完了です。

※影は必要なければ省略しても構いません。

サンプルコード

サンプル.js


function initialize() {
var latlng = new google.maps.LatLng(35.70749, 139.61975);
var opts = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map
(document.getElementById("map_canvas"),opts);
//Marker1
var LatLng1 = new google.maps.LatLng(35.706032,139.665652);
var contentString1 = '小金井公園';
var infowindow1 = new google.maps.InfoWindow({
content: contentString1
});
var image1 = new google.maps.MarkerImage
('http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow1 = new google.maps.MarkerImage
('http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png',
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));

var marker1 = new google.maps.Marker({
position: LatLng1,
map: map,
title: "小金井公園",icon: image1,shadow: shadow1
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map, marker1);
});

//Marker2
var LatLng2 = new google.maps.LatLng(35.68135, 139.76571);
var contentString2 = '東京駅';
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
var image2 = new google.maps.MarkerImage
('http://maps.google.co.jp/mapfiles/ms/icons/rail.png',
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow2 = new google.maps.MarkerImage
('http://maps.google.co.jp/mapfiles/ms/icons/rail.shadow.png',
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var marker2 = new google.maps.Marker({
position: LatLng2,
map: map,
title: "東京駅",icon: image2,shadow: shadow2
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map, marker2);
});
}

サンプル.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>


表示例 地図上 マーカーのアイコンを指定


Google Maps サンプル > マーカーのアイコンを指定