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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ