みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

GoogleMapをAPIで埋め込む(ミニマルバージョン)

なぜかいままでなかなかつかう機会のなかったGoogle Map API。

かつて、 こんな記事 を書いたことがありましたが、実に9ヶ月ぶりに使う機会があったのでメモを残しておきます。
今回やりたいことは、マリンスタジアムを中心としたマップを埋め込む。ただそれだけです。
UIも消せるだけ消しましょう。


Google Maps API をつかって現在地の住所を割り出す。 - みかづきブログ その3


DEMO


HTML

<div id="gmap"></div>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

GoogleMapに置換するdivタグとAPIのscriptのみです。
非常にシンプルです。


JavaScript

(function(win, doc) {

    "use strict";

    init();
    
    function init() {
        var google = win.google,
            elm   = doc.getElementById("gmap"),
            mapOptions = {
                zoom: 15,
                disableDefaultUI: true, // UIを非表示にする
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            map = new google.maps.Map(elm, mapOptions),
            geocoder = new google.maps.Geocoder();
        
        geocoder.geocode({
            "address": "マリンスタジアム"
        }, function(results, status){
            if (status === google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
            }
        });
    }

})(this, document);

とてもシンプルです。
まずマップをつくり、マリンスタジアムの住所を地図の中心にセットしています。


#gmap {
    width: 100%; height: 100%;
}

地図の大きさを指定しています。
これ、style属性をつかったほうが良いときいたことがあるんですがどうなんでしょう。
CSSでも問題なく表示されているように見えます。


やりたいことがこれぐらいシンプルだとAPIじゃなくてiframeで埋め込んでも良いぐらいですね。
地図の色を変えたりピンを編集したりというところはおいおいまとめようと思います。



今回は以上です。