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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ