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

アーカイブ

エステトラブル

このページの先頭へ