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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ