Google Map APIを使って指定した緯度、経度の地図を表示させます。
また、マーカーとインフォウィンドウを作成します。
html,javascriptソースコード
<div id="map" style="width:100%;height:350px;"></div>
<script>
var olat,olng;
//大阪駅の緯度経度を中心に設定
olat=34.702485;
olng=135.495951;
initialize(olat,olng);
function initialize(lat,lng){
var latlng=new google.maps.LatLng(lat,lng);
var opt={zoom:17,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP,draggable:true};
map=new google.maps.Map(document.getElementById("map"),opt);
addMarker("大阪駅",olat,olng,"<p>駅近辺</p>");
}
function addMarker(name,lat,lng,html){
var marker=new google.maps.Marker({position:new google.maps.LatLng(lat,lng),map:map,title:name});
var infowindow=new google.maps.InfoWindow({content:html});
infowindow.open(map,marker);
google.maps.event.addListener(marker,"click",function(){
infowindow.open(map,marker);
});
}
</script>