手に職つけて自由に生きる。徹底比較!GoogleMapをルート付きでWebサイトに埋め込む方法TIPSTwitterFacebook0はてブ0Pocket0LINEコピー2018.12.12この記事は約5分で読めます。GoogleMapで小さな企業や店舗のWebサイトを作るとき、地図を入れている人は多いと思います。この記事では、ユーザビリティを高めるために最寄駅から目的地までのルート表示したGoogleMapの埋め込み方法をお伝えします。WordPressを使っていて初心者の方は、GoogleMapを入れるためのプラグインを使っている人もいるかもしれませんが、プラグインの多用はページ速度を落とすので使わないようにしてください。マイマップにログインします。Mapにログインします。目的地を入力検索してピンを表示させます。Mapの作成をすると作成者のGoogleアカウント(Googleドライブ内)に保存されます。Googleアカウントがないと作成できないので、まだアカウントを作っていない方は先に取得してくだい。Consoleなど、Web制作においては必須ツールを無料で使えるのでぜひ登録しましょう。「蒲田駅」までのルートを作成します。マイマップにログインします。Googleマイマップにログインします。左上の赤い「+新しい地図を作成」ボタンをクリックします。「無題の地図」から任意のタイトルに変更する「新しい地図を作成」をクリックすると、下の日本地図が表示されます。左上にあるポップアップボックスの「無題の地図」をわかりやすい任意のタイトルに変更します。左上の「無題の地図」をクリックします。下のようなポップアップウィンドウが開くので地図タイトルを入力しましょう。入力したら「保存」をクリックします。次に、ルートの終点である目的地を追加し[Enterキー]を押すか、右側の虫眼鏡ボタンをクリックします。目的地(蒲田駅)にピンが立ち、目的地の詳細がポップアップウィンドゥで表示されます(下画面)。「+地図に追加」をクリックすると、目的地の場所が追加されます。目的地のアイコンや色を変更スタイルアイコンをクリックすると、色やアイコンを変更することができます。お店を経営している人は変更するといいですね。次に、スタート地点の追加をします。「ルート」アイコンをクリックすると...スタート地点の入力ボックスが表示されるので、入力し、[Enter]キーを押します。(ここではスタート地点の「二子玉川駅」)ちなみに、デフォルトでは「車」アイコンが表示されていますが、徒歩ルートや自転車ルートに変更することも可能です。ルートマップが表示されるルートマップが表示されました。ニコタマからカマタまで、けっこうシンプルなマラソンルートですね。地図を一般公開設定に変更する今のままだと自分しか見られないプライベート設定になっています。Webサイトにルートマップを埋め込んで、一般の人が見られるようにするには「共有」設定をします。下の画面を参考に、「共有」アイコンをクリックします。すると、下のようなポップアップウィンドウが表示されます。現在は「非公開」になっているので、右側の青い「変更...」をクリックします。「リンクの共有」ポップアップウィンドウが表示されるので、一番上の「オン-ウェブ上で一般公開」を選択し、「保存」ボタンをクリックします。元の「共有設定」ウィンドウに戻るので、「完了」ボタンをクリックします。Webページにルートマップを埋め込む再びルートが表示されたマップに戻ります。タイトル右横の三点アイコンをクリックすると、メニュー一覧が表示されるので「自分のサイトに埋め込む」を選択します。埋め込み用のiframeタグが表示されるのでコピーし、表示したいWebページのソースコード内の該当箇所にペーストします。表示の確認ソースコードにペーストすると、こんな感じで表示されます。タグ内の「width=”●●●”」の●●●部分を「100%」に変更して保存すると、横幅可変のレスポンシブ対応になります。作ったルートマップは、作成者のGoogleアカウント内(Googleドライブ内)に保存されます。削除してしまうと該当マップは表示されなくなります。クライアントに納品するWebサイトに埋め込むルートマップは、クライアントに共有設定をしておきましょう。Mapにログインします。Mapにログインします。目的地を入力検索してピンを表示させます。1まずはゴールの目的地である蒲田駅を、GoogleMap左上の検索窓に入力し、2右側の地図部分にピンを確認します。Mapの左上にあるハンバーガーアイコン(三本線のアイコン)をクリックすると、色々なメニューが表示されます(画像下)メニューの中から「地図を共有または埋め込む」をクリックすると、下の画面が表示されます。デフォルトでは「リンクを送信する」タブが表示されています。埋込みには右隣にある「地図を埋込む」タブをクリックします。iframeタグが表示されるので、タグの右側にある「HTMLコピー」をクリックすると、タグがコピーされるので、地図を埋め込みたいWebページのテキストエディタ側を開き、該当部分にペーストします。表示を確認するこんな感じで表示されます。最後にルートつきのGoogleマップの埋込みは、お店や美容院、整体院など、最寄駅からのルートを表示させることでユーザーに優しい作りになりますね。写真と文字による説明でアクセスマップを書いている人もいますが、案外わかりづらいです。地図が複雑でルートマップでもわかりづらいような場所にある場合は、動画をつけてあげても親切ですね。ご参考にしてください。(10)当サイトの人気スクール全スクール一覧をみるお住まいから探す空飛ぶクリエイターYAKO32歳で未経験からWebクリエイターになり、企画、マーケティング、コンサルティング、デザイン、コーディング、SEOなど全般にわたり一人で行っています。冊子の大型パンフレットから看板までエディトリアルデザイン・印刷物制作知識も豊富です。この仕事は「自由になれること」が最大の魅力。Webクリエイターになって、日本にとどまらずに旅をしながら外国のカフェで仕事をする。そんな自由な働き方をする「フライング(空飛ぶ)・Webクリエイター」を増やすべく、活動しています。CAMPの評判は?プロによる徹底解説2019.12.072020.02.18東京デザインプレックス研究所の口コミ・評判は?学費やコースなど徹底解説!2019.07.072020.02.18遠距離恋愛。CustomEvent('acadp_on_recaptcha_load'))}};タイトルとURLをコピーしましたHOME県から探す。