はてなブログにGoogle Mapを設置する。カスタマイズできるJavaScript APIバージョン。
通常、簡単にブログにGoogle Mapを設置する場合はこうです。
Google Mapからiframeをコピーしてくるだけ。これだけです!
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6826.858601705182!2d139.70214114075975!3d35.68901103152925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd0b91bd8c7%3A0x458dd8de99c9f9e2!2z5paw5a6_6aeF!5e0!3m2!1sja!2sjp!4v1439620732624" width="600" height="450" frameborder="0" allowfullscreen=""></iframe>
〈地図を埋め込む〉で出てくるコードをコピーするだけ。
しかし、ただ場所を示すだけならこれでもいいのですが、カスタマイズしたい場合は違う方法なので、備忘録として書いておきます。
1. Google Map JavaScriptの用意
こちらのJavaScriptをはてなブログの場合はフッターあたりに記述します。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> function initialize() { /* 緯度・経度 */ var latlng=new google.maps.LatLng(35.690907, 139.700242); /* 地図のオプション設定 */ var myOptions = { /*初期のズーム レベル */ zoom: 15, /* 地図の中心点 */ center: latlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* マーカーオブジェクト */ var marker = new google.maps.Marker({ position: latlng, /* マーカーを立てる場所の緯度・経度 */ map: map, /*マーカーを配置する地図オブジェクト */ title: '新宿駅' }); } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script>
2. CSSの用意
CSSに下記を追加します。
#map_canvas { width: 600px; height: 450px; }
3. 本文にHTMLを設置
下記のHTMLを記述した場所にMAPが設置されます。
<div id="map_canvas"></div>
これならカスタマイズが可能で、オリジナルのアイコンを設置したり等できます。
カスタマイズの方法は、機会があったら・・・。
カスタマイズしたMAPを貼ってみました。
同心円やマーカーを設置してみましたよ。