はじめに

近年では、GoogleマップやYahoo!地図などの地図サービスは欠かせない存在となっており、それらを埋め込んだウェブページも増えてきました。特に場所を案内した記事などでは、地図は必要不可欠と言っていいでしょう。

今回は、地図サービスの中でもメジャーなGoogleマップを埋め込む方法のうち、APIを使わない方法をご紹介いたします。

目的地を示したGoogleマップの埋め込み方

まずは、Googleマップを開きます。

Googleマップ

「Googleマップを検索する」に、地図で示したい場所を入力して「Enter」を押します。

「共通」を押します。

「地図を埋め込む」を押します。

埋め込みたい地図の大きさを「小」「中」「大」「カスタム」から選択します。

なお、それぞれの具体的な横幅と高さは以下のとおりです。

大きさ横幅高さ
400px300px
600px450px
800px600px
カスタム自由に指定できます。

「HTMLをコピー」を押し、埋め込みたいウェブページに貼り付けます。

地図の埋め込みが完了しました。

特定の地点から目的地までの経路を示したGoogleマップの埋め込み方

まずは、Googleマップを開きます。

Googleマップ

「Googleマップを検索する」に、目的時を入力して「Enter」を押します。

「ルート・乗換」の上の矢印を押します。

「出発地を入力するか、地図をクリック」に、出発地を入力して「Enter」を押します。または、出発地が地図に表示されていれば、それを押しても大丈夫です。

地図で表示したい経路を選択します。

「<」のような記号を押します。

「地図を埋め込む」を押します。

埋め込みたい地図の大きさを「小」「中」「大」「カスタム」から選択します。

なお、それぞれの具体的な横幅と高さは、先ほどと同様以下のとおりです。

大きさ横幅高さ
400px300px
600px450px
800px600px
カスタム自由に指定できます。

「HTMLをコピー」を押し、埋め込みたいウェブページに貼り付けます。

地図の埋め込みが完了しました。

まとめ

以上、ウェブページにGoogleマップを、APIを使わずに埋め込む方法についてご紹介させていただきました。

地図を埋め込むことにより、ウェブページの利便性が抜群に上がる場面も多いと思います。皆さんも地図を活用して、より使いやすいページを作るよう心がけてください。





おすすめの記事