Google Maps JavaScript API V3
うっかりしている間に、GoogleマップがAPI V3だった…
ごちゃごちゃ書いていたものがすっかりサッパリしていたので、メモです
まず
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
で、スクリプトを読み込み、
<script type=”text/javascript”>
google.maps.event.addDomListener(window, ‘load’, function() {
var mapdiv = document.getElementById(“map_canvas”);
var myLatlng = new google.maps.LatLng(緯度,1経度);
var myOptions = {
zoom: 拡大サイズ,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map(mapdiv, myOptions);
var image = ‘マーカーアイコン絶対パス’;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image
});
var infowindow = new google.maps.InfoWindow({
content: ‘ここに住所’
});
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map,marker);
});
});
</script>
↑<head>内にコレ
で、地図を表示した居場所に、↓
<div id=”map_canvas” ></div>
あとはcssで、このmap_canvasさんに大きさやらなんやかんやを指定
APIキーがいらなくなりました♪
マーカーアイコンを透過pngで作って絶対パスで指定してやれば、マーカーが好きなアイコンで表示されるようになっています！
参考サイト：
手軽になった！Google Maps API V3
Google Maps JavaScript API V3を使って地図を表示する
