覚え書き(K)GoogleMapをサイトに埋め込んでオリジナルアイコンを設置した時の最低限の設定※個別API取得方法もHOMEWeb-trivia(K)GoogleMapをサイトに埋め込んでオリジナルアイコンを設置した時の最低限の設定※個別API取得方法もコーポレートサイトや飲食店のサイトなどの定番コンテンツ「Access」にGoogleMAPを埋め込むのはよくあることですが、通常のGoogleMAPからiframeで地図を埋め込むこともできますが、横幅と縦幅ぐらいのカスタマイズしかできないので、応用が効きません。APIを取得して、GoogleMapをカスタマイズする方法を備忘録としてまとめておきます。src="http://maps.google.com/maps/api/js?sensor=true"></script>(2)bodyタグにスクリプトを読み込ませるための「onload=”initialize();」を記述。id="campus_map"></div></body>(3)CSSで縦横サイズを指定widthを100%にすれば、横幅可変のスマホ対応です。135.510118」が緯度経度。出し方はGoogleMapで表示させたいポイントで右クリック→「この場所について」で出てくる数値を記述します。myOptions);}</script>これでマーカーなどの表示なしのシンプルなGoogleMapを表示できます。DEMO吹き出しを表示して詳細情報を表示GoogleMapに登録されていない場所で、名称は住所を表示させたい場合は以下の様な感じで記述を追加します。それぞれCSSで設定することもできます。}これで、とりあえず簡易的なMAPですが、「好きな位置」に「好きな吹き出し内容」が表示できるようになりました。DEMOマーカーをオリジナルデザインにする。今度は位置を表示するピン(マーカー)をオリジナルのデザインにしてみます。ロゴマークのある飲食店とかのWEBサイト作成とかに使えばオリジナル感が出るかと思います。};画像アイコンがずれて表示してしまう場合は「anchor」で位置を調節します。最終的に出来上がったアイコンがオリジナルのGoogleMapは以下DEMOアイコンが吹き出しっぽいので、詳細情報の方の吹き出しは最初は非表示にして、アイコンをクリックすれば表示されるようにしてます。地図上にマーカーを表示させて、吹き出しに説明を出す好きな画像をマーカーとして表示させるまとめとりあえず、初歩的なGoogleMapの表示で多少のオリジナリティを出そうという事でこんな感じになりました。ここから地図の色を変えたり、さらにカスタマイズはできますが、今回はこのぐらいで。先日の案件では「年配は使いづらいからやっぱり画像の方がいい」という意見も出ました。クライアントさんがGoogleMapに使い慣れてないからそういう意見が出たっていうのもあるかと思いますが、必ずしも「MAP=GoogleMap」ではないんだと再認識しました。結局、画像形式のPDFDownload形式とGoogleMapの表示を切り替える折衷案になったんですけどね。_)mGoogleの仕様変更の件※2017年2月21日追記このエントリーですが、以前はてブのホットエントリーに一瞬だけ載ったみたいで、それなりにアクセス数があるようなんで、追記しておきますけど、上記の記述だけでは新規サイトはGoogleMAPが表示させれません。去年(2016年)の情報なので今更かもしれませんが、2016年6月22日からGoogleの仕様変更でGoogleMAPを使用するには「個別のAPIキー」が必須になりました。設定済みのサイトは問題なく表示されますが、新たに作成するサイト、もしくは元あるサイトに新しくGoogleMAPを設置する場合には下記設定が必要です。※上記だけの設定だと、こんな画面で表示されないはずです。Web」にアクセスして、右上の「キー取得」のボタンを押します。※Googleアカウントのログインが必要になります。」と出てくるので「続ける」を押す。「プロジェクトを作成」が選択されてる状態で「続行」を押す。「名前」はテキトーに何でもいいので記述し、「HTTPリファラー(WEBサイト)」を選択し、概要URLを記述もしくはコピペ。必要項目を記述すると、APIキーが表示されるのでコピペあとは、当記事で紹介したコードを以下のように書き換える。</body>特に上の<body>タグの「onload」の記述を抜いておくようにしましょう。原因はよくわからないんですが、このコードを抜いておかないと、僕が使ってるエディタ(coda2)がクラッシュしてまったく編集ができなくなりました。ちなみに、APIの取得が認識されるのに数分(5分ぐらい?)かかる場合があるみたいなので、すぐ変わらなくてもあせらず待ってみましょう。仕様が変更されるのは、Googleではよくあることですが、これまでのMAPは問題なく表示させておいてくれてて幸いでした。今後はこの設定で表示させるようにします。今回の追記は以上です。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。