gooodmark

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

724bookmark

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