Google マップ API V3 実用編 - JavaScript

Google Maps Javascript API V3 で地図を表示するサンプルです。

こちらの「Google マップ API V3 入門編 – JavaScript」では、Google マップの基本ソースを紹介しました。

今度は実用編として、コーポレートサイト向けに住所にピンを付けて、ストリートビューを表示したいと思います。


Jsサンプルソース

gmap.jsを作ります。


var viewInfoWindow = null;
var mapaVista = null;
var sv = new google.maps.StreetViewService();
var clickedMarker = null;
var panorama = null;
function initialize() {
  var lat = 35.710019;
  var lng = 139.810681;
  var latlng = new google.maps.LatLng(lat,lng);
  var label = 'スカイツリーが目印';
  var html = '○○○株式会社';
  var iwopts = {content: html};
  mapaVista = new google.maps.Map(document.getElementById("gmap"), {zoom: 18, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: false});
  viewInfoWindow = new google.maps.InfoWindow(iwopts);
  var marker = createMarker(latlng, label, html);
  panorama = new google.maps.StreetViewPanorama(document.getElementById("stview"));
}
function createMarker(latlng, label, html) {
  var marker = new google.maps.Marker({position: latlng, map: mapaVista, title: label, zIndex: Math.round(latlng.lat()*-100000)<<5});
  marker.myHtml = html;
  google.maps.event.addListener(marker, "click", function() {
    viewInfoWindow.open(mapaVista, marker);
    clickedMarker = marker;
    sv.getPanoramaByLocation(marker.getPosition(), 50, processSVData);
  });
  google.maps.event.trigger(marker, "click");
}
function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var marker = clickedMarker;
    if (!!panorama  && !!panorama.setPano) {
      panorama.setPano(data.location.pano);
      panorama.setPov({heading: 350, pitch: 60, zoom: 0});
      panorama.setVisible(true);
      google.maps.event.addListener(marker, 'click', function() {
        var markerPanoID = data.location.pano;
        panorama.setPano(markerPanoID);
        panorama.setPov({heading: 350, pitch: 60, zoom: 0});
        panorama.setVisible(true);
      });
    }
  } else {
    panorama.setVisible(false);
    alert('Street View data not found for this location.');
  }
}
google.maps.event.addDomListener(window, "load", initialize);

google.maps.Map メソッドを使って地図を作るところまでは、前回紹介した「Google マップ API V3 入門編」と同じです。


var lat = 35.710019;
var lng = 139.810681;
var latlng = new google.maps.LatLng(lat,lng);
mapaVista = new google.maps.Map(document.getElementById("gmap"), {zoom: 18, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: false});

今回は Google マップ上にピンを付けるため google.maps.InfoWindow メソッドを利用します。

ピンを付けることをマーカーを立てるといいます。


var html = '○○○株式会社';
var iwopts = {content: html};
viewInfoWindow = new google.maps.InfoWindow(iwopts);

google.maps.InfoWindowの仕様

google.maps.InfoWindow の仕様は以下の通りです。

プロパティ説明
content情報ウィンドウ内に表示するテキストを指定します。HTML文も記述できます。
disableAutoPan情報ウィンドウを表示する時に、地図を情報ウィンドウ全体が表示されるよう地図が自動的に移動するのを無効化するかを真偽値で指定します。 デフォルトはfalse(自動移動)。
pixelOffset情報ウィンドウの先端部分と情報ウィンドウを固定するオフセット値を指定します。
position情報をウィンドウを固定する位置の緯度・経度のLatLng値を指定します。
maxWidthmaxWidthには、情報ウィンドウの最大幅を指定します(単位:ピクセル)。 maxWidthを指定した場合、その幅よりあふれる場合は、情報ウィンドウ内に縦スクロールが表示あれます。 maxWidthを指定しない場合は、吹き出し内のコンテンツ量に合わせて自動的に伸縮されます。
zIndex情報ウィンドウの重なり順序を指定します。 数字が大きい方が前面に表示されます。

google.maps.Marker を使って、マーカーをマウスオーバーされた時にツールチップを表示します。


var label = 'スカイツリーが目印';
var marker = new google.maps.Marker({position: latlng, map: mapaVista, title: label, zIndex: Math.round(latlng.lat()*-100000)<<5});
marker.myHtml = html;

google.maps.Markerの仕様

google.maps.Marker の仕様は以下の通りです。

プロパティタイプ説明
clickablebooleantrue の場合、マーカーはマウス イベントとタッチ イベントを受け取ります。デフォルト値は true です。
cursorstringマウスオーバー時に表示されるマウスのカーソル。
draggablebooleantrue の場合、マーカーをドラッグすることができます。デフォルト値は false です。
flatbooleantrue の場合、マーカーの影は表示されません。
iconstring|MarkerImage前面のアイコン。
mapMap|StreetViewPanoramaマーカーを表示する地図。
positionLatLngマーカーの位置。必須です。
shadowstring|MarkerImage影の画像
shapeMarkerShapeドラッグ/クリック用の画像マップの領域定義。
titlestringロールオーバー テキスト
visiblebooleantrue の場合、マーカーが表示されます。
zIndexnumber地図上のすべてのマーカーが zIndex 順に表示され、高い値のマーカーは低い値のマーカーより前に表示されます。デフォルトでは、マーカーは緯度に従って表示され、低い緯度のマーカーが高い緯度のマーカーより前に表示されます。

position プロパティは必須です。

google.maps.StreetViewService を使ってストリートビューを表示します。


panorama = new google.maps.StreetViewPanorama(document.getElementById("stview"));
var sv = new google.maps.StreetViewService();
sv.getPanoramaByLocation(marker.getPosition(), 50, processSVData);
panorama.setPano(data.location.pano);
panorama.setPov({heading: 350, pitch: 60, zoom: 0});
panorama.setVisible(true);

ストリートビュー サービスへのアクセスは、Google Maps API が外部サーバーへの呼び出しを行う必要があるため、非同期に行われます。このため、コールバック メソッドを渡してリクエストの完了時に実行する必要があります。このコールバック メソッドにより結果が処理されます。

説明
getPanoramaByIdパノラマを一意に特定する参照 ID を受け取って、パノラマ データを返します。この参照 ID は、現在のブラウザ セッション内でのみ一定であることに注意してください。
getPanoramaByLocation渡された LatLng と検索対象の半径(メートル単位)を受け取り、指定された領域のパノラマ データを検索します。半径が 50 m 以下の場合、返されるパノラマは指定された位置に最も近いパノラマになります。
戻り値説明
OK一致するパノラマをサービスが見つけたことを示します。
ZERO_RESULTS渡された条件と一致するパノラマをサービスが見つけられなかったことを示します。
UNKNOWN_ERRORストリートビュー リクエストを処理できず、正確な理由が不明であることを示します。

setPov の仕様

google.maps.StreetViewService.setPov の仕様は以下の通りです。

プロパティタイプ説明
headingnumber真北に相対的なカメラの角度。真北は 0 度、東は 90 度、南は 180 度、西は 270 度です。
pitchnumberストリートビュー車両に相対的なカメラのピッチ(度)。90 度(真上)から -90 度(真下)の範囲です。
zoomnumberズーム レベル。レベル 0 は完全なズームアウトで、ズームインするとズーム レベルが増加します。

htmlサンプルソース

index.html を作ります。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="gmapv3.js"></script>
</head>
<body>
 <div id="gmap" style="width: 100%; height: 300px; margin: 10px 0;"></div>
 <div id="stview" style="width: 100%; height: 300px;"></div>
</body>
</html>
表示したい幅と高さを決めます。


<div id="gmap" style="width: 100%; height: 300px; margin: 10px 0;"></div>
<div id="stview" style="width: 100%; height: 300px;"></div>

index.html をブラウザで開いてみると、指定した場所が表示されます。

Googleマップとストリートビューを表示

参考サイト

まとめ

Google Maps Javascript API V3 で地図を表示するサンプルを紹介しました。

Googleマップはマーカーを自前のアイコンにしたり、地図の色などをカスタマイズできたりします。次回はカスタマイズ編を紹介したいと思います。

おつかれさまでした。

この記事がお役に立ちましたら シェア をお願いいたします。