このページの本文へ

Googleマップ有料化でYahoo! APIを使ってみた (3/5)

2012年03月12日 13時16分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

マーカーを表示する

 シンプルな地図が表示できたので、次にマーカーを表示してみます。サンプル4がGoogleマップ、サンプル5がYahoo!マップでマーカーを表示するサンプルです。

 どちらもマーカーオブジェクトを生成する点は同じです。Googleマップではnew google.maps.Marker()として表示に必要な引数を一括して指定できます。Yahoo!マップではnew Y.Marker()としてマーカーオブジェクトを作成し、その後、マーカーを表示するマップオブジェクトにaddFeature()メソッドを使って追加します。

【図】fig4.png

Googleマップでのマーカー表示

【図】fig5.png

Yahoo!マップでのマーカー表示

サンプル4[HTML]


<!DOCTYPE html> 
<html> 
  <head> 
  <meta charset="utf-8"> 
    <title>グーグルマップでマーカーを表示する</title>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/sample.js"></script>
  </head>
  <body>
    <h1>グーグルマップでマーカーを表示する</h1>
    <div id="myMap" style="width:600px;height:400px;"></div>
  </body>
</html>

サンプル4[sample.js]


window.onload = function(){
  var lat = 35.692507;  // 新宿駅の緯度
  var lng = 139.700346; // 新宿駅の経度
  var map = new google.maps.Map(
    document.getElementById("myMap"),{
      zoom : 12// ズームレベルは12
      center : new google.maps.LatLng(lat, lng),
      mapTypeId : google.maps.MapTypeId.ROADMAP // 通常の地図を表示
    }
  );
  // マーカーを表示する
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map
  });
}

サンプル5[HTML]


<!DOCTYPE html> 
<html> 
  <head> 
  <meta charset="utf-8"> 
    <title>ヤフーマップでマーカーを表示する</title>
    <script type="text/javascript" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=●●●"></script>
    <script type="text/javascript" src="js/sample.js"></script>
  </head>
  <body>
    <h1>ヤフーマップでマーカーを表示する</h1>
    <div id="myMap" style="width:600px;height:400px;"></div>
  </body>
</html>

サンプル5[sample.js]


window.onload = function(){
  var lat = 35.692507;  // 新宿駅の緯度
  var lng = 139.700346; // 新宿駅の経度
  var map = new Y.Map("myMap");
  map.drawMap(
    new Y.LatLng(lat, lng),
    12// ズームレベルは12
    Y.LayerSetId.NORMAL  // 通常の地図を表示
  );
  // 地図の種類を切り換えるコントローラーを表示
  map.addControl(new Y.LayerSetControl());
  // ズームコントローラーを表示
  map.addControl(new Y.SliderZoomControlVertical());
  // マーカーを表示する
  marker = new Y.Marker(
    new Y.LatLng(lat, lng)
  );
  map.addFeature(marker);
}

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています