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

アーカイブ

エステトラブル

このページの先頭へ