> 記事 > WordPress ウェブ制作 プログラミング > 埋め込みマップの比較。GoogleMaps と BingMaps

埋め込みマップの比較。GoogleMaps と BingMaps

2016.07.07.(Thu)Masahiro Natori By.Masahiro Natori

こんにちは、masaです。

ブログで特定の場所についての紹介記事を書く、たとえば自分が訪れた観光地やレストラン、あるいは有名でもないけれど、ちょっと心が和むような公園、そんな場所を紹介すること、あるんじゃないかと思います。

もし自分が、その紹介した場所をブログの読者の方にも実際に訪れてみてほしい、と思っている場合には、記事内にその場所の情報(住所、地図など)を示しておくと、読者の方にも「家からどのくらいか」「どこの近くなのか」「~のついでに寄れるかな」というイメージが付きやすくなるのではないかと思います。

ブログ記事に地図を貼り付けるのはそんなに難しいことではないですので、どのようにやったらいいか簡単に手順を示したいと思います。

Sponsored Link

GoogleMaps で地図を共有する


地図の代名詞となりつつある(?) GoogleMapsですが、こちらで地図を共有する方法を示してみたいと思います。今回例としてみたのはPerthにある博物館「Perth Museum」です。残念ながら現在改装中で、2020年再オープンの予定です。

Google Maps

こちらから、Perth の博物館を検索してみます。
キーワードには「wa perth museum」と入れてみます。

WAmuseum
ちゃんと出てきました。この地図を埋め込みたい場合には、左側の「共有」というひらがなの「く」のようなマークを押します。

wamuseum_umekomi
と、このような、ダイアログが出現します。
「リンクを共有」と「地図を埋め込む」の2つのタブがありますので、「地図を埋め込む」をクリックしてください。

WAmuseum_umekomicode
「地図を埋め込む」をクリックすると、以下のような画面になります。左側の「中▼」部分で、マップの大きさを指定することが出来ます。その横にある 「iframe src=”https://.. 」部分が地図の埋め込みコードになります。

この部分を左クリックすると、すべてが反転し、フォーカスした状態になりますので、右クリックしてコピーします。

WAmuseum_umekomicodeselect
このコピーしたコードをWordPressのブログに貼り付けると、地図が表示されるようになるのですが、注意としては「テキスト」状態で貼り付けることです。「ビジュアル」ではうまくいきません。

WAmuseum_umekomicode_textmode
「テキスト」になっていることを確認してから、貼り付けると、このような感じになります。

WAmuseum_code
プレビューなどで見ると、きちんと、マップが表示されていることが確認できると思います。



こちらの地図には、左上に白いウインドウが表示され、ルート検索のリンクや、場所の星マークなどが表示されていますが、こちらを取り除きたい場合には、埋め込みGoogle Mapsの左上の白い枠を消す方法 をご覧ください。


BingMaps で地図を共有する


せっかくですので、もう一つ地図サービスでの地図共有をやってみたいと思います。選んだのはMicrosoftの地図サービス、Bing Mapsを利用する場合です。

Bing マップ

先ほどと同じように、「wa perth museum」で検索をかけてみると、もちろんPerth Museumが表示されます。

bingmap1
埋め込み用のコードを得るには、左側の「共有」リンクをクリックします。BingMapsでは、丸いアイコンですね。

bingmap2
クリックすると、このような画面が出てきます。
この https://binged.it/29oIIIJ というリンクは、ブログへの埋め込みではありません。このURLをメールなどで送り、相手がURLをクリックするとブラウザで地図が開く、というような感じで使います。

ここで青い「埋め込む」というボタンを押してみると、新しい埋め込みMap用のWindowがポップアップしてきます。

bingmap3
Mapのサイズ
Small(325x280px)
Large(500x400px)
Custom(任意)
Mapのオプション(固定か、動かせるマップか)
地図のタイプ(一般の地図か、航空写真か)
などを指定して、「Generate code」ボタンを押すと、

bingmap4
このように、埋め込みコードが出てきます。GoogleMapsの時と同じように、一件訳が分からないコードですが、この中にどのような地図を表示させるか、という情報が含まれています。

コードをコピーして、同じようにWordPressのブログ画面に貼ってみます。

bingmap5
もちろん、テキストモードになっていることを確認してから貼り付けてください。

bingmap6
そうすると下図のように地図が張り付きます。


・・あれ?

Museumはどこ?

そうなんです。BingMapsで共有した場合にどういうわけか、本来フォーカスされていなければいけないPerth Museumを示すマークが表示されないんです。

こうやって表示されるべきだと思うんですけどね。なんか不思議です。

bingmap7
というわけで、やはりGoogleMapsの方がお勧めできる感じですね。

Masahiro Natori

Masahiro Natori
こんにちはMasaです。39歳の時に16年勤めた会社を辞め、2013年4月に家族で日本からパースに引っ越してきました。2013年6月よりGITSに勤務。2014年1月にGITSのサポートでProgrammerとして457ビザを取得。 趣味は音楽を聴くことと、部屋のレイアウトを変えること、ドライブすること。
  • facebook
  • twitter