オリジナル画像をマーカーに使用したクールなGoogleマップの簡単な作り方

2014.3.11|ツール ノウハウ紹介

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

オリジナル画像をマーカーに使用した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マップの設置方法も便利ですが、今回のようなオリジナル画像を使用した方が、他のサイトとはひと味違う地図を演出できます。
ぜひ導入してみてはいかがでしょうか。

コメント一覧

コメントはありません。

この記事にコメント

*

トラックバックURL