gooodmark

goodなWebサイトを厳選ブックマーク!デザインやディレクションの参考にどうぞ。

516bookmark

Google Maps API でマップ表示

位置情報、吹き出し、画像、ズームなどを調整でOK。

html
<div id="map_canvas"></div>
css
#map_canvas { height: 500px; }
js
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<script type="text/javascript">

function initialize() {
    var latlng = new google.maps.LatLng(35.7100627,139.8107004);
    var myOptions = {
        zoom: 14,
        center: latlng,
		mapTypeControl: false,
		panControl: false,
		zoomControl: false,
		streetViewControl: false
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
 	 
    //マーカー
    var image = 'img/icon_map.png';
    var Marker = new google.maps.Marker({
        position: latlng,
        map: map,
       icon: image//デフォルトのマーカーを表示する場合は指定無し
    });
     
    //吹き出しのテキスト
    var contentString = '東京スカイツリー';
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    //infowindow.open(map, lopanMarker);//初期状態で吹き出しを表示させる場合は有効にする  
    google.maps.event.addListener(Marker, 'click', function() {
        infowindow.open(map, Marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>
複数箇所プロットする場合
function initialize() {
	var myOptions = {
		zoom: 12,
		center: new google.maps.LatLng(33.53910, 133.56010),
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
	var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
	var markers = [
				   ['高知県立美術館',33.56104,133.57295],
				   ['牧野植物園',33.54661,133.57790],
				   ['桂浜',33.497145,133.57480],
				   ['高知市文化プラザかるぽーと',33.55826,133.54725],
				   ['高知城',33.56067,133.53147]
				   ];
	for (var i = 0; i < markers.length; i++) {
		var name = markers[i][0];
		var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
		createMarker(name,latlng,map);
		}
}
function createMarker(name,latlng,map){
	var infoWindow = new google.maps.InfoWindow();
	var marker = new google.maps.Marker({position: latlng,map: map});
	google.maps.event.addListener(marker, 'click', function() {
			infoWindow.setContent(name);
			infoWindow.open(map,marker);   
			});
} 
google.maps.event.addDomListener(window, 'load', initialize);

demo