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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ