Google マップ API V3 実用編 - JavaScript ホームページ制作 | 墨田区

Google マップ API V3 実用編 – JavaScript

LINEで送る
Pocket

グーグル Maps Javascript API V3 で地図を表示するサンプル です。
こちらのページ では、Google マップの基本ソースをご紹介しました。
今度は実用編として、コーポレートサイト向けに住所にピンを付けて、ストリートビューを表示したいと思います。
Google マップ API V3 入門編 – JavaScript




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


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マップとストリートビューを表示



参考サイト

Info windows – Google Maps JavaScript API v3 — Google Developers
オーバーレイ – Google Maps JavaScript API v3 — Google Developers
ストリートビュー サービス – Google Maps JavaScript API v3 — Google Developers


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

おつかれさまでした。

LINEで送る
Pocket

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

Javascript / jQueryの勉強が思うように進まないときは!

Javascript / jQueryの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Javascript / jQueryコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Javascript / jQueryコースあり!現場のプロが直接指導 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL