GoogleMapsAPIでピンを表示

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

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

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

<br />
&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;<br />
	&lt;div&gt;&lt;/div&gt;<br />
&lt;/div&gt;<br />

<br />
.map {<br />
	position: relative;<br />
	width: 100%;<br />
	height: 0;<br />
	padding: 56.25% 0 0;<br />
}<br />
.map &gt; div {<br />
	position: absolute;<br />
	top: 0;<br />
	left: 0;<br />
	right: 0;<br />
	bottom: 0;<br />
}<br />

<br />
var init = function(){</p>
<p>    var fuji = {<br />
        lat: 35.3605555,<br />
        lng: 138.7277777<br />
    };</p>
<p>    var map = new google.maps.Map(document.getElementById('map'), {<br />
        center: fuji,<br />
        zoom: 8,<br />
        mapTypeId: google.maps.MapTypeId.ROADMAP,<br />
        scrollwheel: false<br />
    });<br />
}<br />
if( window.addEventListener ) {<br />
    window.addEventListener( 'load', init, false );<br />
}<br />
else if( window.attachEvent ) {<br />
    window.attachEvent( 'onload', init);<br />
}<br />
else {<br />
    window.onload = init;<br />
}<br />

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

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

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

関連記事