オリジナル画像をマーカーに使用したGoogleマップ

マーカーとは

マーカーとは、地図上の位置を指ししめす目印です。ここでは、オリジナルの画像を使用する方法を共有します。

仕組みについて

Google maps apiという仕組みを使用します

Google maps apiとは

無料でアクセスできるウェブページに Google マップを埋め込むことができるGoogleによる無料サービスです。インターネットユーザーが自由にアクセスできる一般公開のウェブサイトであれば、このAPIを無料で利用できます。

使い方

マップを埋め込んだhtmlファイルを所有するサーバーにアップロードし、それをiframeタグで読み込にて表示する形式をとります。

手順

1)以下ソースをコピペして、緯度、経度をあなたの使用する住所のものに変更して保存。

<html> <head> <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0px; padding: 0px; } #map { height: 100%; } </style> <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //<![CDATA[ var map; function solmap() { // 表示する地図の緯度,経度を入力してください 緯度↓  ↓経度↓ var latlng = new google.maps.LatLng(35.65633733216987,139.6996808052063); var opts = { // 数が大きいほど地図が拡大されます。 zoom: 16 , mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; map = new google.maps.Map(document.getElementById("map"), opts); var markerOpts = { // 表示する画像の緯度,経度を入力してください↓ position: new google.maps.LatLng(35.65633733216987,139.7), map: map, // アップしたマーカー用画像のパスを入力してください
icon: "gmosol.gif" }; var marker = new google.maps.Marker(markerOpts); } //]]> </script> </head> <body onload="solmap()"> <div id="map"></div> </body> </html>

(ソースは以上となります)
2)マーカーとなる画像をご自身の所有するサーバーへアップロードします。
3)緯度経度を変更したマップのhtmlファイルをご自身の所有するサーバーアップロードします。
4)アップロードしたhtmlファイルをiframeで表示させます。
サンプルのhtmlソース)

<iframe src="(アップロードしたファイルパス)" style="width:450px; height:300px; border:0;"></iframe>


実際のGoogleマップの表示)


まとめ

以前ご案内したGoogleマップの設置方法も便利ですが、今回のようなオリジナル画像を使用した方が、他のサイトとはひと味違う地図を演出できます。 ぜひ導入してみてはいかがでしょうか。
すべての人にインターネット
関連サービス