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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ