Google マップ API V3 実用編 - JavaScript

2014.11.17 2024.08.20

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

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

2024-08-20

Google Maps Javascript API V3 で地図を表示するサンプルです。Google マップでは、カスタマイズでさまざまなことができますが、ここではGoogle Maps Javascript API V3 の基本ソースを紹介します。

www.saka-en.com

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

1 Jsサンプルソース
2 htmlサンプルソース
3 参考サイト
4 まとめ

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値を指定します。
maxWidth	maxWidthには、情報ウィンドウの最大幅を指定します（単位：ピクセル）。 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 の仕様は以下の通りです。

プロパティ	タイプ	説明
clickable	boolean	true の場合、マーカーはマウスイベントとタッチイベントを受け取ります。デフォルト値は true です。
cursor	string	マウスオーバー時に表示されるマウスのカーソル。
draggable	boolean	true の場合、マーカーをドラッグすることができます。デフォルト値は false です。
flat	boolean	true の場合、マーカーの影は表示されません。
icon	string\|MarkerImage	前面のアイコン。
map	Map\|StreetViewPanorama	マーカーを表示する地図。
position	LatLng	マーカーの位置。必須です。
shadow	string\|MarkerImage	影の画像
shape	MarkerShape	ドラッグ/クリック用の画像マップの領域定義。
title	string	ロールオーバーテキスト
visible	boolean	true の場合、マーカーが表示されます。
zIndex	number	地図上のすべてのマーカーが 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 の仕様は以下の通りです。

プロパティ	タイプ	説明
heading	number	真北に相対的なカメラの角度。真北は 0 度、東は 90 度、南は 180 度、西は 270 度です。
pitch	number	ストリートビュー車両に相対的なカメラのピッチ（度）。90 度（真上）から -90 度（真下）の範囲です。
zoom	number	ズームレベル。レベル 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マップとストリートビューを表示

参考サイト

・Info windows - Google Maps JavaScript API v3 — Google Developers

・オーバーレイ - Google Maps JavaScript API v3 — Google Developers

・ストリートビューサービス - Google Maps JavaScript API v3 — Google Developers

まとめ

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

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

Google マップ Styled Maps Wizardを使ってカスタマイズする方法

2024-08-20

GoogleマップのカスタマイズにはStyled Maps Wizardを使うと簡単にカスタマイズができます。カスタマイズしてオリジナルのGoogleマップを作りましょう。ここではGoogle Maps API Styled Map Wizardの使い方とJavascriptへの適用方法を紹介します。

www.saka-en.com

おつかれさまでした。