JavaScript Google Mapに好きな画像のPinを刺す

公開: 2015-07-07 22:30
更新: 2016-04-29 06:03

あっきぃです。

あっきぃんちの近くに銭湯があります。

先日入れそうなタイミングがあり、初めて入ってみました。

東京大空襲でも燃えなかった銭湯で、男子側と女子側の天井が繋がっており、昭和感たっぷりです。そしてお湯が信じられないくらい熱かったです。1分で出ました。まじで。



ということで、

Google Mapを用意します。



HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<div id="map"></div>

JavaScript

var map;
function initialize() {
        var mapOptions = {
                center: { lat: 35.6585805, lng: 139.7454329},
                zoom: 17
        };
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

東京タワーを指しているのですが、いまいちピンと来ません。

ということで画像を用意して刺してみましょう。


ピンは明るい画像がいいと思うので、

こちらの「とにかく明るいピン」を使用します。

JavaScript Google Mapに好きな画像のPinを刺す

ピンを挿入する場合、
先ほどのmapインスタンスに対して次のような処理を書きます。

function setPin() {
        var image = {
                url: 'http://appstars.jp/assets/img/pin.png',
                scaledSize: new google.maps.Size(50, 50),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(25, 25)
        };
        var pin = new google.maps.Marker({
                position: { lat: 35.6585805, lng: 139.7454329},
                icon: image
        });
        
        pin.setMap(map);
}

こちらのsetPin()をinitialize()の関数の最後にでも呼んであげましょう。

すると...

いい感じですね。


scaledSizeで画像の表示サイズを設定してください。
Retinaに対応する場合は2倍サイズで画像を作ると綺麗です。


originは座標の開始位置。(0,0)でいいと思います。

(省略すれば(0,0)な気がする。)


anchorはピンの先端の位置です。

今回は画像が、50*50で、その中央をピンの先にしたいので、(25,25)と設定しました。

もし「とにかかく明るいピン」のアゴで刺したい場合は、(25,50)とすればよさそうです。



とりあえずこんな感じで。

ではでは。



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。