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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ