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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ