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

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

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

動作サンプルです

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

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>

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

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

コメント