株式会社カラフルクローバー公式ブログ

WordPress・HTML・CSS等のTipsを公開しています! 株式会社カラフルクローバー公式ブログ

広告の企画制作の株式会社カラフルクローバー 公式サイトはこちら

*

埋め込んだGoogleMapsの所在地を、好きなアイコンに変更する方法

      2015/11/24

皆様こんにちは!

GoogleMaps埋め込みの応用編です。

① ホームページに地図を載せた後に、自社のアイコンを配置します。
② さらに、複数の場所の地図を埋め込み、同様にアイコンを配置します。

まずはHTMLファイルから。

map自体のdivの外側をさらにgmap_wrapperというクラスのdivでくくっていますが、これはスマホで閲覧したユーザーが無限スクロールにハマるのを防ぐためでした。(→前の紹介記事はこちら

つぎに、JSファイルです。

ちょっと長いですが、それぞれの記述にコメントをつけておきましたので、確認してみてください。
1つのページに2つの地図を表示するために、このような記述になっています。

表示はこうなります。

スクリーンショット 2015-11-18 16.37.24

カスタマイズによって地図がモノクロになっていますが、自社のアイコンが表示されました。
ワンポイントになりますので、是非試してみてくださいね!

 - ホームページ管理者向け, 未分類

  • このエントリーをはてなブックマークに追加

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

Googleアナリティクスは実践あるのみ。

みなさんこんばんわ 本日学習したのは  googleアナリティクスの試験勉強。 …

Twitter
ソーシャルメディアとの関係はどう理解する?

みなさんこんばんわ。 本日もSEOの学習を進めました。 今回は昨日よりも書籍を …

魔法陣
消えたホームページを復活させる魔法教えます!

皆様こんにちは。 つい先日、サーバー管理業者から連絡が来ました。 来ないでしょ、 …

Z視線
注意!コンテンツのレイアウトを考える前に意識すること。

みなさんこんばんわ、 今日もWebライティングの勉強をしたのですが、 今回はコン …

クローラー
SEOにおけるクロールの仕組みについて。

みなさんこんばんわ、今日もSEOの勉強をしたので早速、勉強内容をお知らせします! …

○htmlから始める、Schooデビュー。

こんばんわ ブログでは初めての投稿になります。 カラフルクローバー広報担当の竹原 …