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

    ajaxzip2からajaxzip3へ変えてみました!!

    弊社で日頃からお世話になっているライブラリーといえば、ajaxzi…

  2. JavaScript

    Javascript

    Yahoo!地図のWeb APIを使ってみました!!

    弊社では今までGoogleMapしか使ってこなかったのですが、使用…

  3. JavaScript

    Javascript

    setInterval()とsetTimeout()

    Javascriptでタイマー設定する時に使用する関数にsetTime…

  4. JavaScript

    Javascript

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

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

  5. JavaScript

    Javascript

    history.back()

    履歴を残したまま全ページに戻りたい場合、history.back(…

  6. JavaScript

    Javascript

    Geolocation APIの精度ってあまり良くない!?

    先日記事にしたGeolocation API!!精度って良くないの…

最近の記事

  1. WordPressのセキュリティ対策(脆弱性対策)
  2. ドメイン失効
  3. SEO関連タグ
  4. SEO関連タグ
  5. レンタルサーバー(共用サーバー)
  6. システム開発用のアイキャッチ
  7. システム開発用のアイキャッチ
  8. ドメイン 利用制限
  9. WP:WordPress(ワードプレス)
  10. システム開発用のアイキャッチ
PAGE TOP