みかづきブログ その3

3ヶ月つづけてみました。

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で埋め込んでも良いぐらいですね。
地図の色を変えたりピンを編集したりというところはおいおいまとめようと思います。



今回は以上です。