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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ