サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
www.google-mapi.com
GroundOverlay(url:string, bounds:LatLngBounds, opts?:GroundOverlayOptions) var newark = new google.maps.LatLng(40.740, -74.18); var imageBounds = new google.maps.LatLngBounds( new google.maps.LatLng(40.716216,-74.213393), new google.maps.LatLng(40.765641,-74.139235)); var myOptions = { zoom: 13, center: newark, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map (document.getE
・ルート（各種の交通手段を使用）は、DirectionsService オブジェクトを使用して計算できます。このオブジェクトは Google Maps API ルート サービスと通信し、サービスはルート リクエストを受信して計算した結果を返します。これらのルート結果をユーザー自身で処理することも、DirectionsRenderer オブジェクトを使用して結果をレンダリングすることもできます。 ・ルートでは、原点と目的地をテキスト文字列（「東京、大阪」、「名古屋、静岡、京都」など）または LatLng 値として指定できます。ルート サービスは一連のウェイポイントを使用して、複数の部分からなるルートを返すことができます。ルートは、地図上にルートを描画するポリラインとして表示されるか、要素内のテキストによる説明として表示されます（「Williamsburg Bridge ランプを右折」など）。
現在地図に表示されている位置から、指定した座標へ移動する方法を確認します。Mapクラスで用意されている「panTo」methodを使います。 panTo(latLng:LatLng) 戻り値:None 地図の中心を指定された LatLng に変更します。 変更範囲が地図の幅と高さの両方よりも 小さい場合、遷移はスムーズにアニメーション表示されます。 引数に移動後の座標を表すLatLngクラスのオブジェクトを指定します。 移動する場合、横方向の移動が地図の幅よりも小さく、縦方向の移動が地図の高さよりも小さい場合には、スムーズにアニメーション表示で移動します。移動が地図の幅や高さよりも大きい場合には地図が切り替わるように移動します。 実際には次のように記述します。 function initialize() { var latlng = new google.maps.LatLng(35.65
マッピィでは、Google社が提供しているGoogle Maps API[1]の利用方法に特化した情報を提供しています。 Google Mapsを自分のサイトやWebアプリケーションとして利用できるようにGoogle社が提供しているのがGoolge Maps APIです。 これまで「Google Maps API Standard Plan（無償版）」と「Google Maps APIs Premium Plan（有償版）」に分かれていたものが、2018年7月16日から「Google Maps Platform（従量制料金）」という新しいサービスに統合されました。Google Maps Platformを利用するには、まずGoogle Cloudへ登録する必要があります。 従量制料金については、毎月200 USドル分は無料でGoolge Maps APIを利用することができます。相当数のア
Google Maps JavaScript API V3 から、XMLファイルの読み込み関数 と XMLパーサーのライブラリ。（GDownloadUrl関数やGXml.parse ） がなくなりました。 そのためjQueryのJavaScriptライブラリーを利用します。 <script src="https://maps.google.com/maps/api/js?key=ＡＰＩキー"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> //<![CDATA[ document.write('<scr'+'ipt src="サンプル.js" charset= "utf-8"></scr'+'ipt>'); // ]]> </script> 次のjavascript
地図上やマーカーなどをクリックした時にその地点に関する情報を表示するために使用されるのが情報ウィンドウです。下のような形で地図上で表示されます。 表示例 情報ウィンドウ サンプルイメージ地図は地理院タイル （標高タイル）を加工して作成 情報ウィンドウを表示させる為の準備として、はじめに情報ウィンドウを表すInfoWindowクラスのオブジェクトを作成します。コンストラクタ関数は次のように定義されています。 InfoWindow(opts?:InfoWindowOptions) 指定されたオプションを使用して情報ウィンドウを作成します。 情報ウィンドウは、オプションでの指定に応じて、地図上の特別な位置やマーカーの上に配置することができます。 地図の自動移動が無効にでない限り、情報ウィンドウを開くと、情報ウィンドウが地図内に表示されるように地図が移動します。 情報ウィンドウを作成した後、ope
Webページの中でGoogle Maps APIを使い地図を表示する場合にHTMLタグにどのような記述が必要か順を追って説明します。 ベースのHTMLとして下記HTML5ページを利用します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps JavaScript API サンプル</title> </head> <body> <p>Google Maps APIを使ったサンプル地図。</p> </body> </html> 一般的なHTMLページです。 HTMLタグ内でGoogle Maps APIを使用する為には、最初にGoogle Maps APIを使用するのに必要なGoogle発行のJavaScriptコードを読み込みます。ＡＰＩキーが必要です。下記のように読み込みます。
地図上に目印をつける目的で使用されるのがマーカーです。 下のような形で地図上で表示されます。 表示例 マーカー サンプルイメージ地図は地理院タイル （標高タイル）を加工して作成 マーカーを表示させる為の準備として、はじめにマーカーを表すMarkerクラスのオブジェクトを作成します。コンストラクタ関数は次のように定義されています。 Marker(opts?:MarkerOptions) 指定されたオプションを使用してマーカーを作成します。 地図が指定されている場合、構築するときに地図にマーカーが追加されます。マーカーを表示するためには位置を設定しておく必要があることに注意してください。 オプションである1番目の引数にはマーカーを表示する対象となる地図や座標などを設定するために使用するMarkerOptionsオブジェクトを指定します。引数を省略した場合は用意されているmethodなどを使って
addressプロパティには、検索する住所文字列を指定します。 住所に日本語を指定できるようにするには、languageプロパティに「ja」を指定します。 その他、国コード（regionプロパティ）、検索範囲（bounds）などを指定可能です。 注: Geocoding API は Google マップと組み合わせて使用する場合にのみ使用できます。地図に表示せずにジオコーディングの結果のみを利用することは禁止されています。 //ジオコードオブジェクト var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': '住所文字列', 'region': 'jp' }, function(results, status){ if(status==google.maps.GeocoderStatus.OK){ /
このページを最初にブックマークしてみませんか？
『マッピィ Google Maps API JavaScriptの使い方 -』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
