WOOM林です。
今回は簡単にGoogleマップのアイコンをオリジナルのアイコンにする方法をご紹介したいと思います。
Googleマップの設置
V2まではGoogle Maps APIを使うためにはAPI Keyを取得する必要がありましたが、
V3では不要になりました。
ということで、先ずはGoogleマップを表示させる為に
以下の行を追加し、Google Maps API V3のライブラリを組み込みます。
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
次に下記のようなGoogleマップを表示させるためのタグを用意します。
<!-- Googleマップを表示 --> <div id="map"></div>
これで設置は完了です。
Googleマップのアイコンを設定
/* 地図の初期化 */
function initialize() {
/* 緯度・経度：日本 */
var latlng=new google.maps.LatLng(35.693718,139.775463);
/* 地図のオプション設定 */
var myOptions={
/* 初期のズーム */
zoom: 16,
/* 地図の中心点 */
center: latlng
};
/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById("map"), myOptions);
/* アイコン */
var image=new google.maps.MarkerImage(
'js/maplogo.png'
);
/* マーカーオブジェクト */
var marker=new google.maps.Marker({
position: latlng,
map: map,
icon: image,
title: '株式会社WOOM'
});
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, 'load', initialize);
これで下記のように表示されます。
地図を表示する要素(今回の場合は#map)の幅/高さを指定しないとwidth/heightは0のままで表示されないので
下記のように適当な値を指定してください。
#map {
width:100%;
height:400px;
}
座標の調べ方については
場所の座標を調べる
Chrome、Firefox、Internet Explorer などのブラウザから、Google マップで見つけた場所の座標を調べることができます。Google マップを開きます。
地図上の任意の場所を右クリックします。
[この場所について] をクリックします。
画面下部に詳細情報を記したカードが表示されます。