Sep

2013

14

新しいGoogle map API V3 でのシンプルに【地図、中心ずらし、マーカー】の表示

chapcher
古いコードで新しくwebに作ると表示されない?ウチだけ?
たぶん一番一般的な状態でのコードです。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<script>
var map;
function initialize() {
	var mapOptions = {
		zoom: 16, //拡大率
		center: new google.maps.LatLng(35.6570 , 139.7015), // 地図の中央
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
    // 表示するHTMLのidの名前は 'map-canvas'
	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(35.6585 , 139.7015), // makerの位置
		map: map
	});  
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<!-- 注)大きさ設定しないと表示されないです -->
<div id="map-canvas" style="width:500px;height:500px">&nbsp;</div>


更にカスタマイズはこの辺かと(英語)
https://developers.google.com/maps/documentation/javascript/examples/?hl=ja

広告