読者です 読者をやめる 読者になる 読者になる

中央線に乗って考える

好きなモノとか、欲しいモノとか、日々のこととか

はてなブログにGoogle Mapを設置する。カスタマイズできるJavaScript APIバージョン。

Technology Technology-Web

通常、簡単にブログに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>

〈地図を埋め込む〉で出てくるコードをコピーするだけ。

f:id:wedges:20150815155134j:plain

 

しかし、ただ場所を示すだけならこれでもいいのですが、カスタマイズしたい場合は違う方法なので、備忘録として書いておきます。

 

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を貼ってみました。

同心円やマーカーを設置してみましたよ。