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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ