Google Map APIを使ってMAPを組み込んでカスタマイズしてみる。

Pocket
LINEで送る

普通にGoogle MAPをiframeで埋め込むのもいいけど、ピンを変更したり色調整したりしたい!
そんなときはGoogle Map APIを使って埋め込むことになるのですが、その備忘録です。

APIを使用しない場合のサンプル

おさらいと、どう違うのかを比べるために、まずはiframeでGoogle MAPを埋め込んでみます。

iframeデフォルト

ごくごく普通の配置方法です。
埋め込みたい場所をGoogle MAPで開き、共有>地図を埋め込むからサイズを調整するなりしてHTMLをコピー、ページの埋め込みたい箇所にペーストします(ダミーで岩手大学です)

iframeで埋め込む場合、APIキーも何も必要ありません。ただコピーしてペーストするだけで設置完了です。

iframeにCSSフィルターをかける

グレーにしたいなど簡単にカスタマイズしたい場合、CSSフィルターを使う手があります。
配置方法は上記と同じで、

iframe.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

をあてます。

問題点:IE非対応。ピンにもフィルターがかかってしまう。オリジナルマーカーは付けられない。

APIキーを取得する


APIキーを取得しなければ、Google MAP APIは使用できません。また支払い方法としてクレジットカード情報を登録しないと使用できません。

APIキーを取得手順は、以下のサイトがとても詳しいです。

よっぽどの大企業でもない限り、課金されるほど使用することはないようです。以下参考リンクです。

APIキーを使って実際にページに設置する。

1つめのQiitaのリンクで設置まで解説されているのですが、こちらでも解説していきます。

APIの読み込み

Maps JavaScript APIを読み込むための記述を追加します。

<script src="http://maps.google.com/maps/api/js?key=APIキー&amp;language=ja"></script>

APIキーの部分に先程取得したAPIキーを入れてください。

SSL化したサイトに配置する場合は、src="http://maps.google.com/(略httpの部分をhttpsにしてください。

HTMLで埋め込みたい箇所に記述を追加する

<div id="map-test01"></div>

ここではidをmap-test01とします。

CSSで埋め込むmapのサイズを指定する

#map-test01 { 
height: 400px; 
width: 100%;
}

サイズは任意で調整してください。
このサイズを指定しないとMAPが表示されません。

scriptの記述を追加する

こちらでは地図を表示するための記述を追加します。
以下は最低限の必要な記述です。

<script>
 var MyLatLng = new google.maps.LatLng(39.7161777, 141.1364266); //座標を指定
 var Options = {
 zoom: 15, //地図の縮尺値を指定
 center: MyLatLng, //地図の中心座標
 mapTypeId: 'roadmap' //地図の種類を指定
 };
 var map = new google.maps.Map(document.getElementById('map-test01'), Options); //埋め込むMAPのidを指定
 </script>
デモページ

デフォルトのピンを表示させる。

上の例では最低限の指定しかしていないため、ピンすら表示されていませんでした。
前述のscriptの記述内にさらに追加します。

//マーカーの指定
var marker = new google.maps.Marker({
    position: MyLatLng,
    map: map, 
});
デモページ

オリジナルのピンを表示させる。

先程のマーカーの追記に指定を加えます。ここではマーカーの設定としてまとめて記載します。

//マーカーの指定
var marker = new google.maps.Marker({
    position: MyLatLng,
    map: map, 
    icon: new google.maps.MarkerImage(
      '/images/pin.png',//マーカー画像URL
      new google.maps.Size(48, 48),//マーカーの表示サイズ(画像サイズに合わせる)
      new google.maps.Point(0, 0),//マーカー画像表示の起点(変更しない)
      new google.maps.Point(24, 45)//マーカー位置の調整(適時)
    ),  
});
デモページ

簡単な設定でグレースケールにする

ここではscriptで彩度の設定をすることでグレースケールにします。
またまたscriptに追記していきます。

//彩度の設定
var mapStyle = [{
    "stylers": [{
    "saturation": -100 //彩度を無しにしている
}]
}];
var mapType = new google.maps.StyledMapType(mapStyle);
    map.mapTypes.set( 'GrayScaleMap', mapType);
    map.setMapTypeId( 'GrayScaleMap' );
デモページ

グレースケールになったのですが、左上の「地図|航空写真」(マップタイプコントロール)の切り替えをすると元のカラーに戻ってしまいます。

左上のマップタイプコントロールを非表示にする

左上のマップタイプコントロール「地図|航空写真」を非表示にします。
scriptのvar Optionsに一行追加するだけです。

//マーカーの指定
var marker = new google.maps.Marker({
    zoom: 15,
    position: MyLatLng,
    map: map, 
    mapTypeControl: false, //マップタイプコントロールの表示設定
});
デモページ

さらにscriptで凝った調整をしてみる


上記を参考にカスタマイズして行きます。簡単に言うとStyling Wizard: Google Maps APIsというサービスを使って色々調整し、吐き出されたJSONをscriptに追記します。
このカスタマイズで色の調整をしますので、前述のグレースケール(彩度)の指定は外してください。
scriptが非常に長くなるのでここでは例は出しません。

設定項目が多岐に渡っていて、うまく調整していかないと見づらくなりアクセシビリティ的にも宜しくない結果になってしまいますが、近隣のPinを減らせるのは嬉しいかも。
このサイト(事業所一覧 | ユーフーズ株式会社)ではGoogle MAPのカスタマイズを頑張って、まるでイラレで作ったような地図に仕上げています。

あと、普通に外枠のdivにCSSでborder-radiusが効きますね。

デモページ

このscriptのオプションで調整はいくらでもできるのですが、実際に使うことはあまり無さそうなので、参考リンクだけ載せておきます。


ついでに、かっこ良く調整してシックに決めてるサイトを見つけたので、こちらのリンクを置いておきます。カフェも気になりますね〜。ブログ記事を練るときとか気分転換も兼ねて行ったら捗りそう。

エラー原因探索表

よく見かけるやつ

書いてある通りにやっても表示されない。そう何か不具合が起きている。症状によって原因が絞り込めるので、簡単にまとめてみました。

症 状 原 因
地図が配置されるべき場所が真っ白(スペースは空いている) ・head内のAPIキーの読み込みscriptを記述していますか? また、サイトに合わせてhttphttpsを変えていますか?
・親要素に高さ指定してるからと地図を配置するidの高さを100%とすると表示されません。px指定しましょう。
・カスタマイズを頑張ろうとしてscriptの記述を間違えても真っ白になります。
地図の代わりにグレー背景とエラーメッセージ。 ・head内のAPIキーの読み込みscriptに正しくAPIキーがコピペされていますか?
地図の上に半透明グレーがかかってエラーメッセージ。 ・APIキーを取得するとき、クレジットカード登録を忘れていませんか?
・APIキーが必要なかった時代に設置して、そのまんまになってませんか?
そもそも地図が配置されるスペースごと表示されていない。 ・地図を配置するidに高さ・横幅の指定をCSSでちゃんとしていますか? idclassの綴り間違いなど疲れてるとうっかりやりがち……。

やらかしてナレッジを得るたびに追加していく予定です。

Pocket
LINEで送る

back to top