目的
表示するGoogleMapのピンの位置やズームレベルなど細かい設定をすることが目的です。
単純にGoogleMapをWebページに埋め込むなら、GoogleMap上で場所を検索し「共有」から「地図を埋め込む」に記述されているコードを貼り付けるのが一番簡単です。
今回のようにJavaScriptを使って地図を表示するメリットは、マウスホイールでの拡大・縮小の有無や地図の縮尺の表示など細かい設定が行えることです。
緯度・経度で場所を指定できるため、GoogleMapにまだ登録されていない番地や場所にもピンを表示できることが可能です。
緯度・経度を調べる方法は、GoogleMap上でピンを表示したい位置で右クリックして「この場所について」を選ぶことで、確認することができます。
1. GoogleMapsAPIを読み込む
2016.7.13 追記
2016年6月22日付けでAPIキーが必須になりました。
今後、下記で紹介したAPIキーを取得していない方法を試してもグレーの背景に感嘆符が表示され、エラーになります。
過去に設置したGoogleMapは、追記時点では問題なく表示されています。
新規で設置する場合は、APIキーを取得してください。今回の改定内容については下記をご覧ください。
・Google Maps API の標準プランを改定しましたAPIキーの取得方法については下記をご覧ください。
・GoogleマップのAPIキーのエラーが出る時の対処法
##APIキーを取得していない場合
APIキーがなくても表示されますが、今後APIキーが必須となったときに表示されなくなる可能性があります。
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
※上述した通り、APIキーが必須になりました。
##APIキーを取得した場合
読み込むときに位置情報を取得するかなどのパラメータの設定を行えます。
パラメータありとなしで記述の仕方が異なります。
下記のxxxxxxxxxxxxxxxxxの箇所をAPIキーに変更してください。
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxx"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&key=xxxxxxxxxxxxxxxxx"></script>
###sensorパラメータについて
Google Maps APIを使って作成するアプリケーションが位置情報を取得する必要がある場合はtrue、そうでない場合はfalseを指定して下さい。
引用元：センサーのパラメータ指定 - Google Maps API入門
2. GoogleMapの設定を記述
htmlファイルに直接記述するか、外部ファイルに記述して読み込む。
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById('google-map'); //IDを入力
var myOptions = {
zoom: 15, //ズームのレベルを指定。数値が小さいほど、より広域に表示
center: new google.maps.LatLng(35.685175,139.752799), //表示の基点となる緯度経度を入力
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true, //地図の縮尺（200mとかの目盛）。デフォルトは無効。
scrollwheel: false, //マウスホイールでの拡大・縮小を無効
};
var map = new google.maps.Map(mapdiv, myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.685175,139.752799), //ピンの緯度経度を入力
map: map,
title: "皇居" //ピンにマウスカーソルを乗せたときに表示されるタイトルを入力
});
});
</script>
2. GoogleMapの設定を記述（色調整ver）
GoogleMapの色を調整したい場合はこちらを記述。
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById('google-map'); //IDを入力
var myOptions = {
zoom: 15, //ズームのレベルを指定。数値が小さいほど、より広域に表示
center: new google.maps.LatLng(35.685175,139.752799), //表示の基点となる緯度経度を入力
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true, //地図の縮尺（200mとかの目盛）。デフォルトは無効。
scrollwheel: false, //マウスホイールでの拡大・縮小を無効
styles: [{
stylers: [{//色合いを設定
hue: "#2985f5"},//カラーコード
{ gamma: 1.50},//ガンマ値
{ saturation: -100}]}]//彩度 -40
};
var map = new google.maps.Map(mapdiv, myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.685175,139.752799), //ピンの緯度経度を入力
map: map,
title: "皇居" //ピンにマウスカーソルを乗せたときに表示されるタイトルを入力
});
});
</script>
3. マップを表示したい箇所にIDを指定
2で記述した同じID名をhtmlファイルに記述してください。
マップの表示幅や高さなどはCSSで指定してください。
<div id="google-map"></div>
参考サイト
オプションを追加することで、細かい設定が可能です。