Google Maps APIが気軽に使えるようになった

 

メルです。

Google Maps JavaScript API v2の提供が
2013年11月18日で終了となりv3へ移行しました。

これに伴い、
「今まで表示できていたGoogleMapが表示されなくなった」などの
お問い合わせが、何故かここの所多いです。

見れなくなっていた事に最近になって気付いた方も多いのでしょうかね?

GPoint(lng, lat)、centerAndZoom() を筆頭に使えなくなった関数が
多数あるため2013年11月18日以降は地図が表示されなくなったようです。

今現在でも動いている物に関しては、当面はそのままでも大丈夫ですが、
早めにV3に切り替えたほうが良いでしょう。

 

Google Maps API V3の書き方

 

Google Maps JavaScript API v3 参考。

サンプルはこちら

 

Google Maps API V3のサンプルソース

 

<head>~</head>内に以下を記述

//Google Maps APIを読み込む
<script src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8" type="text/javascript"></script>

<script type="text/javascript">
function initialize() { 

    // Google Mapsで利用する座標
   var latlng = new google.maps.LatLng(35.710053, 139.810724); 

    var mapOptions = { 
        zoom: 18, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        center: latlng 
    }; 

    // GoogleMapsの生成
    var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); 

    // マーカーを生成
    var gmarker = new google.maps.Marker({ 
        map: gmap, 
        position: latlng, 
        title: "タイトル" 
    }); 

    // 噴出しの生成
    var infoWindow = new google.maps.InfoWindow({ 
        content: "噴出しの内容", 
        maxWidth: 400
    });

    // マーカーのクリック時に噴出し標示
    google.maps.event.addListener(gmarker, 'click', function(event) { 
        // 情報ウィンドウの表示
        infoWindow.open(gmap, gmarker); 
    }); 

    // ロード時に噴出しを表示
    google.maps.event.addListenerOnce(gmap, 'tilesloaded', function () {
        // 情報ウィンドウの表示
		infoWindow.open(gmap, gmarker);
	});
}
</script>

 

■Google Maps APIを読み込む(2行目)

<script src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8" type="text/javascript"></script>

V3からAPIキーを取得しなくてもGoogleMapsが使えるように
なりましたので気軽に使えるようになりました。

sensorは、位置情報を取得するのにセンサー(GPSなど)を
使用するかどうかを示します。

true:使用する
false:使用しない

 

■Google Mapsを表示した時の初期の座標を指定(8行目)

var latlng = new google.maps.LatLng(35.710053, 139.810724);

緯度と経度を記入します。

地図から座標を取得したい場合はこちらの MAP をお使い下さい。

 

Google Mapsを表示した時の初期のズーム値(11行目)

 zoom: 18,

数字が大きいほど拡大表示されます。
通常は12~18くらいの間で見ながら調整すれば良いと思います。

 

■マーカーに表示される噴出しの内容(28行目)

content: "噴出しの内容",

HTMLタグが使えます。

 

(29行目)
maxWidth: 400

噴出しの最大横幅を、上記をpx指定する事で調整出来ます。

 

HTMLへの読み込みと表示

 

<body>内に以下を記述

<body onload="initialize()" />
<div id="map" style="width: 620px; height: 600px"></div>
</body>

 

■ページ読み込み時にGoogle Mapsの関数を読み込みます。(1行目)

<body onload="initialize()" />

 

■地図の表示とサイズ(2行目)

<div id="map" style="width: 620px; height: 600px"></div>

 

id="map"指定した場所に地図が表示されます。
地図の大きさは、スタイルシートで指定します。

 

ほとんどコピペでいけると思いますので一度やってみてください。

 

この投稿は役に立ちましたか? 役に立った 役に立たなかった

 

ネットビジネス速報メールマガジン

 

メルのネットビジネス速報では、悪質高額塾などの被害が拡大しないように
新しい悪質販売者の情報が入り次第、速報でお伝えいたします。

Dreamweaver、Fireworks、PhotoshopなどのTipsやチュートリアルの紹介、
最新SEO情報、その他ネットビジネスに関する情報をいち早く配信しています。

お名前(必須)
メールアドレス(必須)

記事「Google Maps APIが気軽に使えるようになった」にコメントを残す

*

サブコンテンツ

危険な高額塾

タグ

人物 ムーバブルタイプ WEB 詐欺組織 復元 与沢翼×蝶乃舞 インターネットビジネススクール テーマ 立体 Windows 7 functions.php マニュアル バイドゥー 不正送信 Cash on Wordpress ロリポップ パズル ライオンアフィリエイト 無断送信 Google Maps ブラシ ビジネス もざ ネットビジネス大全集 ヤフーショッピング Google Maps API 大園式転売塾 レイアウト ドメイン 個人情報 伊藤 虎太郎 Line モザイク リンクシェイカー 権利収入 ネットゲーム ネットガレージ 背景 加工 サンタ ブラクラ アンダーグラウンドアフィリエイトクラブ 放射線 Baidu レビュー followmatic CGI プラグイン やしろ塾 RMT 短縮URLツール 北川 雅嗣 改ざん クラック コピーボタン BBIZ タスクバー postpost ブロックポリシー ping ざくざく君 転売大園塾 副業術 Wordpress Content Slide office デスクトップ 土屋ひろし 量産 インペリアルゴールド トレンドアフィリエイト RSS ヤフー Ban Hammer ping送信 大園転売塾 フォローマティック レンタルサーバー 秒速で1億円稼ぐ男 MT 伊藤虎太郎 ボタン YouTube Maniax 2017 既得権益 moza 流出 CS5 Tiger-Wing 詐欺 スマホ SKナレッジ ネットビジネス最後の楽園 自己アフィリエイト ライブチャット ウイルス High Concept Marketing アドセンス 改竄 中山秀人 株式会社バンザイ 高速ゲーム DOCTYPE 三橋美仁 レタープレス アクセス制限 サイト改ざん ネットショップ 株式会社A-ブログレス 宮田麗花 自動化 音量アイコン 優先順位 スカイプ Yahoo フレンドシップメール LinkShaker Firefox explorer css 不正アクセス インターネットエクスプローラー アレックス 脆弱性 株式会社Free Agent Style 株式会社ニュース MasterCollection クラウド入力機能 android 切り抜き FTP 大園麗花 FireWorks プロモーション せどり ブロック twitter 無料 ソース レイアウト崩れ KMSpico クリックランキング Internet Explorer document.all DTD 特権ビジネス バナー 日本語入力変換ソフト 大西良幸 タイガーウイング 与沢翼 アフィ匠 賢威 wp-login.php 定型文 @PAGES ランキング アクセスアップ 出店料 トラフィック ネットビジネス ツール エクスチェンジ Windows 申請金ビジネス ECサイト 久積篤史 球体 伊藤 歩 小笠原健一 Agency Business Favicon 新井浩 トレンドキーワード ウインドウ PHP IP Diamond Affiliate Masters Program IE ソースコード 固定ページ ファビコン テンプレート 不労所得の神 シャンプー Youtube ライン 関根義光 ブルートフォースアタック 池田純矢 バックアップ 切抜き CS6 管理ツール 村上省吾 無料オファー クラウド変換 株式会社SRシステム wordpress ネオヒルズアカデミー プロファイル インフォトップ ぼかし メモ 到達率 BUYMA エクスプローラー 画像 エディタ getElementByTagName Adobe Extension Manager Chrome 滑らか 配布 加藤 秀吉 秀吉塾天下統一 自動 WP iphone 百度 スタイルシート スムーズ Thunderbird アイコン 株式会社SRシステム SyntaxHighlighter 蝶乃舞 情報商材 PPC ハート 短縮URL Login LockDown スクロール 特定のメールアドレス 感染 wpXサーバー SEO エキスパートメール ユーチューブマニアクス2017 高額塾 やしろひろたみ .htaccess アフィリエイト tool グラデーション HTML4.0 EC system メルマガ配信システム ワードプレス 石井匠 html ヤフオク マイクロソフト SmoothScroll.js 個人情報流出 クロスアフィリエイト MovableTYpe ソフト インターネット KMS認証 カスタマイズ 原田真 ツイッター 登録禁止 IBS google セキュリティ 関根塾 JavaScript アンダーグラウンドメソッド 管理画面 アレックス式ネオせどりスクール バイマ ブラウザ force puzzle 81a338 getElementById マルウエア 株式会社WINGOOD 掲示板 XHTML がら空きビジネス 山下 自己アフィリ RSS Includes Pages 伊藤塾 比較 上位表示 Newpost Catch 表示

アーカイブ

エステトラブル

このページの先頭へ