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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ