Google Map APIを使って地図を表示する

トップページJavascript CSS講座⇒Google Map APIを使って地図を表示する

Google Map APIを使って地図を表示する


Google Map APIを使って指定した緯度、経度の地図を表示させます。
また、マーカーとインフォウィンドウを作成します。

			
<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>		
			
			
Mam's WebSite