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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ