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

アーカイブ

エステトラブル

このページの先頭へ