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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ