マーカーとは
マーカーとは、地図上の位置を指ししめす目印です。ここでは、オリジナルの画像を使用する方法を共有します。仕組みについて
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マップの表示）