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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ