GoogleMapsAPIでピンを表示

GoogleMapsAPIの地図へピンを追加する方法です。

まず、地図を表示します。

ソースは、前の記事YoutubeやGoogleMapsをリキッド表示にするCSSGoogleMapsAPIで地図を表示を参考に。

<div id="map" class="map">
	<div></div>
</div>
.map {
	position: relative;
	width: 100%;
	height: 0;
	padding: 56.25% 0 0;
}
.map > div {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
var init = function(){
 
    var fuji = {
        lat: 35.3605555,
        lng: 138.7277777
    };
 
    var map = new google.maps.Map(document.getElementById('map'), {
        center: fuji,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    });
}
if( window.addEventListener ) {
    window.addEventListener( 'load', init, false );
}
else if( window.attachEvent ) {
    window.attachEvent( 'onload', init);
}
else {
    window.onload = init;
}

google.maps.Markerの書式でピンを追加

google.maps.Markerの書式を追記します。
ピンを立てたい地図と座標などを指定しています。

var init = function(){
 
    var fuji = {
        lat: 35.3605555,
        lng: 138.7277777
    };
 
    var map = new google.maps.Map(document.getElementById('map'), {
        center: fuji,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    });
 
    var marker = new google.maps.Marker({
        map: map,
        center: fuji,
        title: '富士山'
    });
}
if( window.addEventListener ) {
    window.addEventListener( 'load', init, false );
}
else if( window.attachEvent ) {
    window.attachEvent( 'onload', init);
}
else {
    window.onload = init;
}

関連記事

Pocket