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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ