2014年に制作した記事を2016/09に加筆修正
googleマップを埋め込むだけなら特に知識がなくても難しいことはないです。
ただ、いろいろカスタマイズしたい場合はGoogle Maps APIを使うこともあるので、ある程度JavaScriptの知識が必要です。
単純にhtmlに地図を埋め込むだけなら、googleで地図検索して、コードを貼り付けるだけで実現できます。
検索キーワードは詳細な住所でも、「◯◯駅」のようなスポット名でも良いでしょう。
上記の手順の通り、埋め込み自体は難しくありません。コードをhtmlにコピペするだけです。ここではレスポンシブ対応にするコツをご紹介します。
<div class="wrap_map">
<iframe src="〜" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
iframeタグはGoogle マップの共有からコピペしたコードです。srcの中身は長いので省略しました。
width/height属性がありますが、これらの値はなんでも良いです。
ここで重要なのは、コピペしたコードを親タグで囲ってしまうということです。
親タグはdivタグ以外でも良いです。適切なものを使ってください。
親タグには任意のclass名（またはid名）をつけておいてください。
.wrap_map {
position: relative;
padding: 0 0 56%;
height: 0;
overflow: hidden;
}
.wrap_map iframe{
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
地図を呼び出すiframeは親タグに対して幅を100%します。
高さは親タグの方のpaddingでbottomの値を変えることで対応します。横幅に対して%で指定します。
jsで特に何かする必要はないのですが、レスポンシブ対応にした際、ブラウザ幅が変更されると肝心のスポットが中央に表示されなくなってしまいます。
それが気になる場合は、ウィンドウ幅がリサイズされたらiframeをリロードさせるという処理をするのはいかがでしょうか。
$(function(){
var timer = false;
var src = $('.wrap_map iframe').attr('src'); //地図を呼び出すiframeのsrc属性の値を控えておく
$(window).on('resize', function(){
if (timer !== false) { //リサイズ中に何度も処理が行われるのを防ぐ
clearTimeout(timer);
}
timer = setTimeout(function() {
$('.wrap_map iframe').attr('src',''); //リサイズを検知したら、一度地図を呼び出すiframeのsrc属性を空にして
$('.wrap_map iframe').attr('src',src); //再度、src属性に値を入れる
}, 200);
});
});
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
1ページに複数マップがあるなら、配列で処理してみてましょう。
$(function(){
var timer = false;
var src=[];
$('.wrap_map iframe').each(function() {
src.push($(this).attr('src')); //地図を呼び出すiframeのsrc属性の値を配列変数に控えておく
});
$(window).on('resize', function(){
if (timer !== false) { //リサイズ中に何度も処理が行われるのを防ぐ
clearTimeout(timer);
}
timer = setTimeout(function() {
$('.wrap_map iframe').attr('src',''); //リサイズを検知したら、一度地図を呼び出すiframeのsrc属性を空にして
$.each(src, function(i, val) {
$('.wrap_map iframe').eq(i).attr('src',val); //すべての地図を呼び出すiframeに対して再度、src属性に値を入れる
});
}, 200);
});
});
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
一つの地図に複数のマーカーを設置したり、マーカーの色を変えたり、経路を表示させたり・・・ということをマイマップを使って登録し、webページに貼り付けることも可能です。
ただ貼り付けただけだと、縮尺がうまくないことがあります。
そういう時は、src属性の値の最後に&z=12（数字は0〜20の自然数）を付与してみてください。数値は適当に変えてちょうど良い表示を模索してください。
APIキーの管理をしたくないので、サンプルは割愛します。
Google Map APIを使うにはAPIキーが必須です（ネット上のGoogle Map APIの解説記事が作成された時期によっては必須ではないとされていますが、2016/06のある時期から必須になったようです）。
APIキーを取得するにはgoogleアカウントが必要です。企業のサイトなどで使用する際は、企業としてアカウントを取得すると良いでしょう。
企業サイトなのにうっかり個人のアカウントで取得すると、後々面倒なことになりかねないのでご注意ください。
また、Google Map APIは条件によって課金されることがあります。使用前に、課金の問題をクリアしておきましょう。
APIキーの取得そのものは無料でできます。
以下に取得方法があります。他にもネット検索をすると解説してくれている記事がたくさあるので、頑張って取得してください。
このページの上の方にある情報ですが、再度掲載します。
提供元サイトにチュートリアルやらリファレンスやらがあるのですが、2016/09現在、英語のみのようです。日本語の詳しい解説が欲しい場合は、ネットで親切な方々の記事を検索するしかありません。
親切な方々の記事も作成された時期によっては、現状とかなり違ったりするので、その辺りをよく確認しましょう。
とりあえず、ガイドは日本語なので、とっかかりは大丈夫のようです。
APIキーの管理をしたくないので、サンプルは割愛します。
html5が推奨されているようですが、xhtmlやhtml4でも問題なさそうです。
まずは、ライブラリを読み込みます。迷ったらheadタグ内かbodyタグの終了タグ直前あたりが妥当なところでしょうか。
<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
{APIキー}の部分は取得したAPIキーを入れてください（{ }は不要）。
<div id="map_canvas"></div>
地図を貼り付けたい箇所に地図情報を読み込むためのタグを設置します（id名は任意）。
cssは特に設定をするは必要ありませんが、レスポンシブ対応にしたければ、上記の単純な埋め込みのときと同様にcssを適宜設定します。
#map_canvas {
position: relative;
padding: 0 0 56%;
height: 0;
overflow: hidden;
}
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
ふきだし（情報ウィンドウ）を表示させる場合は、ふきだし内のhtmlタグに対してcssを設定できるので、必要であれば適宜設定してください。
地図上にふきだし（情報ウィンドウ）を表示させてみます。
ここではjQueryを使っていますが、使わなくても実現できます。
$(function(){
var timer = false;
var latlng = new google.maps.LatLng(35.134078, 139.618292); //地図の中心の座標
var mapOptions = {
center: latlng,
zoom: 15, //縮尺調整0〜18（2016/09現在）
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); //地図の生成
var marker = new google.maps.Marker({ //マーカーの設置
position: latlng,
map: map //生成した地図を格納した変数
});
var infoWin = new google.maps.InfoWindow();//情報ウィンドウの作成
google.maps.event.addListener(marker, 'click', infoWinOpen); //mouseoverなど
function infoWinOpen(){
infoWin.setContent('ここにテキスト※html可');
infoWin.open(map, marker);
}
infoWinOpen(); //最初から表示させたい時
$(window).on('resize', function(){
if (timer !== false) { //リサイズ中に何度も処理が行われるのを防ぐ
clearTimeout(timer);
}
timer = setTimeout(function() {
map.setCenter(latlng);
}, 200);
});
});
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。