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

このページのタグ:[HTML] [JavaScript] [Google Map]
Google Map JavaScript API v3を使って地図の上にピン(マーカー)を表示します。
以下のHTMLファイルを作成しサーバーにアップします。

map-marker.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はマーカー(ピン)をクリックしたときにポップアップ表示するテキストを設定します。

実行結果

サーバーに配置したmap-marker.htmlにアクセスします。下図の画面が表示されます。
大手門にピンが立っているのが確認できます。


ピンをクリックすると設定した文字列"Hello 大手門!"がポップアップ表示されます。


プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)