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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ