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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ