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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ