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