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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ