APIを使ってMAPを組み込んでカスタマイズしてみる。APIを使ってMAPを組み込んでカスタマイズしてみる。APIを使って埋め込むことになるのですが、その備忘録です。目次APIを使用しない場合のサンプルiframeデフォルトiframeにCSSフィルターをかけるAPIキーを取得するAPIキーを使って実際にページに設置する。APIの読み込みHTMLで埋め込みたい箇所に記述を追加するCSSで埋め込むmapのサイズを指定するscriptの記述を追加するデフォルトのピンを表示させる。オリジナルのピンを表示させる。MAPを埋め込んでみます。iframeデフォルトごくごく普通の配置方法です。MAPで開き、共有>地図を埋め込むからサイズを調整するなりしてHTMLをコピー、ページの埋め込みたい箇所にペーストします(ダミーで岩手大学です)iframeで埋め込む場合、APIキーも何も必要ありません。コピーしてペーストするだけで設置完了です。iframeにCSSフィルターをかけるグレーにしたいなど簡単にカスタマイズしたい場合、CSSフィルターを使う手があります。grayscale(100%);}をあてます。ピンにもフィルターがかかってしまう。オリジナルマーカーは付けられない。APIは使用できません。支払い方法としてクレジットカード情報を登録しないと使用できません。APIキーを取得手順は、以下のサイトがとても詳しいです。Mapの機能をウェブサイトやアプリに埋め込むことができます。APIについての詳細は、公式ホームページ...よっぽどの大企業でもない限り、課金されるほど使用することはないようです。現時点での価格表・FAQに合わせて内容を更新しました。Mapsの料金体系が変更になります既にご存じの方も多いと思いますが、**2018年6月11日(アメリカ西海岸時間)**からGoog...APIキーを使って実際にページに設置する。1つめのQiitaのリンクで設置まで解説されているのですが、こちらでも解説していきます。APIを読み込むための記述を追加します。src="http://maps.google.com/maps/api/js?key=APIキー&amp;language=ja"></script>APIキーの部分に先程取得したAPIキーを入れてください。SSL化したサイトに配置する場合は、src="http://maps.google.com/(略のhttpの部分をhttpsにしてください。id="map-test01"></div>ここではidをmap-test01とします。100%;}サイズは任意で調整してください。このサイズを指定しないとMAPが表示されません。scriptの記述を追加するこちらでは地図を表示するための記述を追加します。以下は最低限の必要な記述です。</script>デモページデフォルトのピンを表示させる。上の例では最低限の指定しかしていないため、ピンすら表示されていませんでした。前述のscriptの記述内にさらに追加します。});デモページオリジナルのピンを表示させる。先程のマーカーの追記に指定を加えます。ここではマーカーの設定としてまとめて記載します。});デモページ簡単な設定でグレースケールにするここではscriptで彩度の設定をすることでグレースケールにします。scriptに追記していきます。);デモページグレースケールになったのですが、左上の「地図|航空写真」(マップタイプコントロール)の切り替えをすると元のカラーに戻ってしまいます。左上のマップタイプコントロールを非表示にする左上のマップタイプコントロール「地図|航空写真」を非表示にします。Optionsに一行追加するだけです。WEB技術ブログ!上記を参考にカスタマイズして行きます。APIsというサービスを使って色々調整し、吐き出されたJSONをscriptに追記します。このカスタマイズで色の調整をしますので、前述のグレースケール(彩度)の指定は外してください。scriptが非常に長くなるのでここでは例は出しません。設定項目が多岐に渡っていて、うまく調整していかないと見づらくなりアクセシビリティ的にも宜しくない結果になってしまいますが、近隣のPinを減らせるのは嬉しいかも。MAPのカスタマイズを頑張って、まるでイラレで作ったような地図に仕上げています。あと、普通に外枠のdivにCSSでborder-radiusが効きますね。デモページこのscriptのオプションで調整はいくらでもできるのですが、実際に使うことはあまり無さそうなので、参考リンクだけ載せておきます。APIはjsで設定すればかなり細かくカスタマイズが出来ます。APIの細かいオプションにつついでに、かっこ良く調整してシックに決めてるサイトを見つけたので、こちらのリンクを置いておきます。カフェも気になりますね〜。ブログ記事を練るときとか気分転換も兼ねて行ったら捗りそう。SAPPORO札幌駅から徒歩4分。ONLY」のスタイルで、昔懐かしい喫茶店の居心地のよさや美味しい軽食はそのままに、新たな要素を加えた現代の喫茶店です。エラー原因探索表よく見かけるやつ書いてある通りにやっても表示されない。何か不具合が起きている。症状によって原因が絞り込めるので、簡単にまとめてみました。サイトに合わせてhttphttpsを変えていますか?・親要素に高さ指定してるからと地図を配置するidの高さを100%とすると表示されません。・カスタマイズを頑張ろうとしてscriptの記述を間違えても真っ白になります。地図の代わりにグレー背景とエラーメッセージ。・head内のAPIキーの読み込みscriptに正しくAPIキーがコピペされていますか?地図の上に半透明グレーがかかってエラーメッセージ。・APIキーを取得するとき、クレジットカード登録を忘れていませんか?・APIキーが必要なかった時代に設置して、そのまんまになってませんか?そもそも地図が配置されるスペースごと表示されていない。idやclassの綴り間違いなど疲れてるとうっかりやりがち......。やらかしてナレッジを得るたびに追加していく予定です。