http://aimluck.com/company/access.html
弊社サイトでもやっている方法です。
まずHTML側はこちら。
<script src="map.js"></script> <body onload="googlemap()"> <div id="map_canvas" style="width:500px;height:400px;"></div> </body>
「map_canvas」が地図が納まる箱になります。
上記HTMLで読み込んでいる「map.js」はこちら。
function googlemap() {
//地図本体の設定
var latlng = new google.maps.LatLng(35.674651,139.77771);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}重要なのは3行目で、ここに緯度経度の数値を入れます。
Googleマップ上の任意の箇所で右クリックし、「この場所について」をクリックすると検索バーに緯度経度の数値が表示されます。
これだけで地図は表示されますが、アイコンを加えるコードを足したものはこちら。
function googlemap() {
//地図本体の設定
var latlng = new google.maps.LatLng(35.674075,139.776107);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
//アイコンの設定
var icon = new google.maps.MarkerImage('mapicon.png',
new google.maps.Size(38,46),
new google.maps.Point(0,0)
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: 'アイコンタイトル'
};
var marker = new google.maps.Marker(markerOptions);
}12行目はアイコン用の画像ファイルパス。
13行目はアイコン画像のサイズ。
14行目は中心座標からアイコンの位置を調整したい場合に記入。
