GoogleMapで独自のピンを打つスクリプトを書いた

JavaScript

2018.10.27

GoogleMapにピンを打つスクリプトを書いてみました。地図上にピンを打つウェブシステムなどを作る時の参考になるかと思います。

ピンに画像を指定することも可能です。画像を設定することで、ピンが画像に置き換わります。

以下、スクリプトサンプルです。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<div id="map" style="width: 600px; height: 600px;"></div>
<script type="text/javascript">

// 地図の初期化
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 20,
center: new google.maps.LatLng(35.658582, 139.745464),
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

// マーカー設置
new google.maps.Marker({
position: new google.maps.LatLng(35.658582, 139.745464),
map: map,
icon: "http://blog.supersonico.info/wp-content/uploads/2015/11/icon_156000_16.png"
});

// マーカー設置
new google.maps.Marker({
position: new google.maps.LatLng(35.658600, 139.745464),
map: map,
icon: "http://blog.supersonico.info/wp-content/uploads/2015/11/icon_156000_16.png"
});

// マーカー設置
new google.maps.Marker({
position: new google.maps.LatLng(35.658400, 139.745464),
map: map,
icon: "http://blog.supersonico.info/wp-content/uploads/2015/11/icon_156000_16.png"
});
</script>

複数のピンを打つときは、【マーカー設置】の部分を打ちたいピンの数だけ書くと、ピンが複数表示されます。

参考にしてみてください。