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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ