JavaScript

Javascript

Google Maps API Ver.3 で地図を表示

久しぶりにGoogleMap APIを利用しようとして、

今更なんですが、

「Ver.2終了してる」ってなってませんか?

 

私は今日なりました。

 

Ver.3に切り替わろうとしている事は知っていたんですが、

なんせ最近はたまたまですが、あまりAPIの利用機会が無かったもんで↓↓

 

といこうとで、

早速Ver.3でGoogleMapを表示させて見ることに!!

 

取り敢えず、東京駅周辺の地図を表示させてみます。

 

ソースはこんな感じです↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<title>Google Map バージョン3 テスト</title>
<!-- Google Map -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!-- Google Map -->
<style>
#canvas{
width:300px;
height:300px;
margin:0 auto;
padding:0px;
text-align:center;
}
</style>
</head>
<body>

<article>

<div id="canvas"></div>

<script type='text/javascript'><!--

var address = "東京都千代田区丸の内1丁目"; //東京駅

//GoogleMapを表示
initialize(address);

function initialize(address){

 var geo = new google.maps.Geocoder();

 var request = {
  address: address,
  region: "jp"
 };

 geo.geocode(request, callback);

}

function callback(results, status){

 if(status == google.maps.GeocoderStatus.OK){

 if(results[0].geometry){

  //物件所在地の緯度・経度を取得
  var latlng = results[0].geometry.location;

  //地図の表示オプションを設定
  var opts = {
   zoom: 16,
   center: latlng ,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   navigationControl: true
  };

  //地図を表示
  var map = new google.maps.Map(document.getElementById("canvas"), opts);

  //マーカー 指定の座標に設置
  vvar marker = new google.maps.Marker({
   position: latlng,
   map: map
  });

 }

 }else if(status == google.maps.GeocoderStatus.ERROR) {

  alert("サーバとの通信時にエラーが発生しました。");

 }else if(status == google.maps.GeocoderStatus.INVALID_REQUEST){

  alert("リクエストクエリ(address or latLng)が不足しています。");

 }else if(status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {

  alert("使用制限回数の上限を超えています。\nしばらくしてから、もう一度アクセスしてください。");

 }else if(status == google.maps.GeocoderStatus.REQUEST_DENIED){

  alert("このページではジオコーダの利用が許可されていないません。");

 }else if(status == google.maps.GeocoderStatus.UNKNOWN_ERROR){

  alert("サーバ側でトラブルが発生しました。");

 }else if(status == google.maps.GeocoderStatus.ZERO_RESULTS) {

  alert("該当の物件住所が見つかりません");

 }else{

  alert("GoogleMapが正常に取得できません。");

 }

}

//--></script>

</article>
</body>
</html>

簡単に説明すると、

まずinitialize()という関数を呼び出します。

 

その中で、
geocode()メソッドを使ってaddressに設定した住所の座標を取得します。

 

さらに、
geocode()の第2オプションに設定したコールバック関数(今回は「callback」としておきます)が呼び出されます。

 

そうすると、
コールバック関数にはresultsとstatusが返されるので、

 

statusがOKの場合、

results[0].geometry.locationに座標を入れてくれます。

 

あとは、

optsという変数に地図の表示オプションを設定して、

canvasというidを指定してやった場所に地図を表示させてやるだけです。

 

今回は、ついでにマーカーも表示させてやっていますが、

吹き出しを表示させたい場合などは自分で調べてください。

 

「google.maps.InfoWindow」と検索すれば、

情報は腐るほど出てくると思います。

 

最後に、

念の為「status」に応じたエラーコードも忘れずにしてください。

 

ちなみに、

今回は

http://www.nanchatte.com/map/getAddressByLatLng.html

を参考にさせて頂きました。

WordPress短期学習プログラム

関連記事

  1. JavaScript

    Javascript

    Javascript おすすめのデートピッカー(日付選択ライブラリー)

    WEB制作の仕事をしていると、お客さんからの依頼でデートピッカ…

  2. JavaScript

    Javascript

    画像 右クリックでのダウンロードは禁止!!

    弊社では、物件画像を取り扱うシステムを構築することが多いんです…

  3. jQuery
  4. JavaScript

    Javascript

    「jQuery ui Datepicker」のオプション

    前回の記事では、「jQuery ui Datepicker」の設定…

  5. JavaScript

    Javascript

    Geolocation APIを使ってスマホで位置情報取得

    iphoneやAndroidのGPSを利用して位置情報を取得したい場合…

  6. JavaScript

    Javascript

    flatpickr【デートピッカー用ライブラリ】

    flatpickrについて先日、という日付け選択用のデート…

最近の記事

  1. SEO関連タグ
  2. SEO関連タグ
  3. レンタルサーバー(共用サーバー)
  4. システム開発用のアイキャッチ
  5. システム開発用のアイキャッチ
  6. ドメイン 利用制限
  7. WP:WordPress(ワードプレス)
  8. システム開発用のアイキャッチ
  9. システム開発用のアイキャッチ
  10. Theme(テーマ)の選択
PAGE TOP