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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ