iPentec.com / Document / HTML / JavaScript / Google Map

Google Map JavaScript API v3 を使ってマップ上にピンを立てる (マーカーを表示する）

Google Map JavaScript API v3を使って地図の上にピン(マーカー)を表示します。

補足

この記事で紹介しているコードは、"Google Map JavaScript API v3" のコードです。最新の Maps JavaScript API を利用したピン表示はこちらの記事を参照してください。

コード例

以下のHTMLファイルを作成しサーバーにアップします。

map-marker.html

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  function initialize() { 
    var latlng = new google.maps.LatLng(35.681143,139.767165); 
    var myOptions = { 
      zoom: 15, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var myLatlng = new google.maps.LatLng(35.685867,139.760578);
    var marker = new google.maps.Marker({
       position: myLatlng,
       map: map,
       title:"Hello 大手門!"
    });   
  } 
 
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html>

解説

基本的な地図の表示についてはこちらの記事を参照してください。

var myLatlng = new google.maps.LatLng(35.685867,139.760578);
var marker = new google.maps.Marker({
   position: myLatlng,
   map: map,
   title:"Hello 大手門!"
});

の部分が地図にピンを表示するコードになります。

var myLatlng = new google.maps.LatLng(35.685867,139.760578);

にてピンを設置する位置の緯度経度クラスのインスタンスを作成します。

var marker = new google.maps.Marker({

にてMarkerクラスのインスタンスを作成します。

position: myLatlng,
map: map,
title:"Hello 大手門!"

Markerクラスのメンバを設定します。positionメンバはマーカーの位置を示します。先ほど作成したmyLatlngを設定します。mapはマーカーを表示するGoogleMapのインスタンスを設定します。titleはマーカー(ピン)をクリックしたときにポップアップ表示するテキストを設定します。