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が気軽に使えるようになった」にコメントを残す

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ