WordPress短期学習プログラム
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の短期学習プログラムを
格安(15,000円~)で提供しております。

  • 個人でWordPressを使ったサイト(個人ブログやアフィリエイトサイトなど)構築をお考えの方
  • WordPressを使って副業で稼ぎたい方
  • フリーランスでWordPressを使ったお仕事をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. JavaScript

    Javascript

    zoomi.jsでオンマウス時に画像を拡大

    画像にマウスを乗せた時(オンマウス)に拡大画像を表示させたいという依頼…

  2. JavaScript

    Javascript

    Yahoo!地図にコントロール追加

    Web APIを使って、Yahoo!地図にいくつかのコントロールを…

  3. JavaScript

    Javascript

    setInterval()とsetTimeout()

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

  4. JavaScript

    Javascript

    jQueryのプラグイン「jCanvas」で間取図を作成

    HTML5のCanvasを使ってやりたい事があったので、本日はjQ…

  5. JavaScript

    Javascript

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

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

  6. JavaScript

    Javascript

    「jQuery ui Datepicker」のオプション

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

最近の記事

  1. SEO(エスイーオー)
  2. WordPressプラグイン「Anti-spam」
  3. システムエラー
  4. PHP(ピー・エイチ・ピー)
  5. SONY 広角レンズ「SEL1018」
  6. PHP(ピー・エイチ・ピー)
  7. 俺流塩ラーメン
  8. SEO(エスイーオー)
  9. Linux(リナックス)
  10. Linux(リナックス)
PAGE TOP