Google mapを埋め込む

地図を埋め込むには、いろいろな方法があります。

一番簡単な方法

Share a map URL or short link - Google Maps Help

Google マップ - 地図検索

1) Google mapへアクセスし、該当の場所を検索します。 2) 右下の設定から、地図を共有/埋め込むを選択します。

f:id:hrt0kmt:20141104135950p:plain

3) 地図を埋め込むタブをタップし、サイズを選択、<iframe>タグをコピーし、ソースコードの表示させたい場所へ貼り付けるだけです。

f:id:hrt0kmt:20141104135704p:plain

めんどくさい方法

1)以下をソースコードへ貼り付けます。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
    var latlng = new google.maps.LatLng(11.111111, 111.111111);
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
 
</script>

2)Google mapで該当の場所を検索し、右クリックします。 3)この場所についてを選択し、緯度経度を表示させます。

f:id:hrt0kmt:20141104133747p:plain

4)緯度、経度の部分に、この場所についてを選択して表示される緯度経度を入力します。

var latlng = new google.maps.LatLng(11.111111, 111.111111);

5)bodyタグにinitialize()を追記します。

<body onload="initialize()">

6)地図を表示する箇所にwidthheightを指定して記述します。

#map_canvas {
    width: 300px;
    height: 300px;
}
<div id="map_canvas"></div>

f:id:hrt0kmt:20141104134428p:plain