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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ