ホーム>プログラミング関連>JAVAソースコード
ダウンロード

Android、iOS、ブラウザ用の Cordova GoogleMaps プラグイン v2.7.1

ダウンロードビルドテスト (multiple_maps ブランチ)

このプラグインはアプリケーションに Google マップを表示します。このプラグインは、プラットフォームごとに次のライブラリを使用します。

  • Android : Google マップ Android API
  • iOS : iOS 用 Google マップ SDK
  • ブラウザ : Google マップ JavaScript API v3

PhoneGap と Apache Cordova の両方がサポートされています。

アンドロイド、iOS

ブラウザ

ガイド

  • API キーを生成するにはどうすればよいですか?
  • こんにちは世界
  • Hello, World (PhoneGap ビルドあり)
  • トラブルシューティング

クイックインストール

 $> cordova plugin add cordova-plugin-googlemaps

次に、Google Maps API キーをconfig.xml (Android / iOS) に設定します。 

< widget ...>
  < preference name = " GOOGLE_MAPS_ANDROID_API_KEY " value = " (api key) " />
  < preference name = " GOOGLE_MAPS_IOS_API_KEY " value = " (api key) " />
</ widget >

ブラウザプラットフォームの場合、 

 // If your app runs this program on browser,
// you need to set `API_KEY_FOR_BROWSER_RELEASE` and `API_KEY_FOR_BROWSER_DEBUG`
// before `plugin.google.maps.Map.getMap()`
//
//   API_KEY_FOR_BROWSER_RELEASE for `https:` protocol
//   API_KEY_FOR_BROWSER_DEBUG for `http:` protocol
//
plugin . google . maps . environment . setEnv ( {
  'API_KEY_FOR_BROWSER_RELEASE' : '(YOUR_API_KEY_IS_HERE)' ,
  'API_KEY_FOR_BROWSER_DEBUG' : ''  // optional
} ) ;

// Create a Google Maps native view under the map_canvas div.
var map = plugin . google . maps . Map . getMap ( div ) ;

PhoneGap ビルド設定

< widget ...>

  <!--
    You need to specify cli-7.1.0 or greater version.
    https://build.phonegap.com/current-support
  -->
  < preference name = " phonegap-version " value = " cli-8.1.1 " />
</ widget >

オプションの変数 (config.xml) をインストールする

  • GOOGLE_MAPS_PLAY_SERVICES_VERSION = (16.0.1)
    Google Play サービス SDK のバージョン。他のすべてのプラグインと同じバージョン番号を指定する必要があります。最新バージョンはこちらからご確認ください。

  • ANDROID_SUPPORT_V4_VERSION = (27.1.1)
    このプラグインには Android サポート ライブラリ v4 が必要です。最小バージョンは 24.1.0 です。最新バージョンはこちらからご確認ください。

  • LOCATION_WHEN_IN_USE_DESCRIPTION
    このメッセージは、アプリケーションが必要な回数だけ LOCATION PERMISSION を要求した場合に表示されます。

  • LOCATION_ALWAYS_USAGE_DESCRIPTION
    このメッセージは、アプリケーションがLOCATION PERMISSION を always要求したときに表示されます。

このプラグイン活動をサポートしてください。

このプラグインを無料のままにしておくために、このプロジェクトに少額の寄付を検討してください。

リリースノート

  • v2.7.1

    • 修正: (iOS) v2.7.0 に存在する UiWebView 参照

  • v2.7.0

    • 再採用:cordova-plugin-googlemaps-sdk の依存関係
    • 重要な更新: iOS ではUIWebViewはサポートされなくなりました。 WKWebViewのみ。
    • 修正: (iOS) ionic 4 / 5 でローカルホストから画像ファイルをロードできない
    • 更新: (Android) AsyncLoadImage.java での null ポインター エラーの防止
    • 修正: setDiv を呼び出し、プッシュ/ポップ ページがある場合の CSS アニメーションの干渉
    • 修正: (Android/iOS/ブラウザ) KML パーサーのクラッシュ
    • 修正: 一部の DOM 要素のちらつきと間違ったレンダリング
    • 追加: map.stopAnimation()
    • 修正: map.animateCamera() の実行中はマップを削除できません
    • 更新: (Android) キャッシュ メモリ サイズを増やす
    • 更新: (Android/iOS) デンマーク語ローカリゼーション
    • 修正：（Android） map.setDiv(null)後のサイズ変更イベントを防止する
    • 修正: (Android/iOS) 内部のマップをインタラクティブに操作できない
    • 修正: jslint エラー
    • 修正: marker.setIcon がクラッシュする
    • 更新: デフォルト値の範囲を機首方位と傾斜に設定します。
    • 修正: (Android/iOS) [戻る] ボタンをクリックしてすぐにタッチ検出が間違っています。
    • 修正: マーカー クラスター #2660 のマーカーをクリックするとエラーが発生する
    • Promise-7.0.4-min.js.map を削除
    • 修正：（iOS）バグ修正：「ベアリング」プロパティが「」の場合、アプリがクラッシュする
    • 修正: HTMLColor2RGBA() が間違った値に変換される
    • 修正: (Android) インターネットからマーカー画像をロードできない
    • 多くのバグ修正...

デモ

デモ（ブラウザ）

ドキュメント

すべてのドキュメントはここにあります!!

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md

簡単な例


地図
var オプション = {
  カメラ: {
    ターゲット: {lat: ...、lng: ...}、
    ズーム: 19
  }
};
var map = plugin.google.maps.Map.getMap(mapDiv, options)

マーカー
var マーカー = マップ.addMarker({
  位置: {緯度: ...、経度: ...}、
  タイトル: "Hello Cordova iOS および Android 用 Google マップ",
  スニペット: 「このプラグインは素晴らしいです!」
})

マーカークラスター
var markerCluster = map.addMarkerCluster({
  //maxZoomLevel: 5,
  境界描画: true、
  マーカー: dummyData()、
  アイコン: [
      {最小: 2、最大: 100、URL: "./img/blue.png"、アンカー: {x: 16、y: 16}}、
      {最小: 100、最大: 1000、URL: "./img/ yellow.png"、アンカー: {x: 16、y: 16}}、
      {最小: 1000、最大: 2000、URL: "./img/purple.png"、アンカー: {x: 24, y: 24}}、
      {分: 2000、URL: "./img/red.png"、アンカー: {x: 32,y: 32}}
  】
});

HTML情報ウィンドウ
var html = "<img src='./House-icon.png' width='64' height='64' >" +
           「<br>」+
           「これは一例です」;
htmlInfoWindow.setContent(html);
htmlInfoWindow.open(マーカー);

丸
var サークル = マップ.addCircle({
  '中心': {緯度: ...、経度: ...}、
  「半径」: 300、
  'ストロークカラー' : '#AA00FF',
  'ストローク幅': 5、
  'fillColor' : '#880000'
});

ポリライン
var ポリライン = マップ.addPolyline({
  ポイント: AIR_PORTS、
  'カラー' : '#AA00FF',
  「幅」: 10、
  '測地線': true
});

ポリゴン
var ポリゴン = マップ.addPolygon({
  'ポイント': GORYOKAKU_POINTS,
  'ストロークカラー': '#AA00FF',
  'ストローク幅': 5、
  'fillColor' : '#880000'
});

グラウンドオーバーレイ
var groundOverlay = map.addGroundOverlay({
  'url': "./newark_nj_1922.jpg",
  '境界': [
    {"緯度": 40.712216、"経度": -74.22655}、
    {"緯度": 40.773941、"経度": -74.12544}
  ]、
  「不透明度」: 0.5
});

タイルオーバーレイ
var tileOverlay = map.addTileOverlay({
  デバッグ: true、
  不透明度: 0.75、
  getTile: function(x, y, ズーム) {
    return "../images/map-for-free/" + ズーム + "_" + x + "-" + y + ".gif"
  }
});

Kmlオーバーレイ
map.addKmlOverlay({
  'url': 'ポリゴン.kml'
}, function(kmlOverlay) { ... });

ジオコーダー
plugin.google.maps.Geocoder.geocode({
  // 米国の首都
  "住所"： [
    「米国アラバマ州モンゴメリー」、...「米国ワイオミング州シャイアン」
  】
}, function(mvcArray) { ... });

ポリユーティリティ
var 五稜郭ポイント = [
  {緯度: 41.79883、経度: 140.75675}、
  ...
  {緯度: 41.79883、経度: 140.75673}
】
var contains = plugin.google.maps.geometry.poly.containsLocation(
                    位置, GORYOKAKU_POINTS);
marker.setIcon(contain ? "青" : "赤");

エンコードユーティリティ
var 五稜郭ポイント = [
  {緯度: 41.79883、経度: 140.75675}、
  ...
  {緯度: 41.79883、経度: 140.75673}
】
var encodedPath = plugin.google.maps.geometry.
                       エンコード.encodePath(GORYOKAKU_POINTS);

球面ユーティリティ
var header = plugin.google.maps.geometry.spherical.computeHeading(
                        マーカーA.getPosition()、マーカーB.getPosition());
label.innerText = "見出し : " +Heading.toFixed(0) + "°";

位置情報サービス
plugin.google.maps.LocationService.getMyLocation(function(result) {
  alert(["現在の場所:n",
      "緯度:" + location.latLng.lat.toFixed(3),
      "経度:" + location.latLng.lng.toFixed(3)、
      "速度:" + location.speed,
      "時間:" + 場所.時間、
      "方位:" + location.bearing].join("n"));
});

ストリートビュー
var div = document.getElementById("pano_canvas1");
var panorama = plugin.google.maps.StreetView.getPanorama(div, {
  カメラ: {
    目標: {緯度: 42.345573、経度: -71.098326}
  }
});

このプラグインと Google Maps JavaScript API v3 の違いは何ですか?

Google Maps JavaScript API v3 はどのプラットフォームでも動作しますが、デバイスがオフラインの場合は動作しません。

このプラグインは 3 つの異なる API を使用します。

  • Android : Google マップ Android API
  • iOS : iOS 用 Google マップ SDK
  • ブラウザ : Google マップ JavaScript API v3

Android および iOS アプリケーションでは、このプラグインはネイティブの Google マップ ビューを表示します。これは、Google Maps JavaScript API v3 よりも高速です。また、デバイスがオフラインの場合でも機能します。

ブラウザ プラットフォームでは、このプラグインは JS マップ ビュー (Google Maps JavaScript API v3) を表示します。 PWA (プログレッシブ Web アプリケーション) として動作する必要がありますが、デバイスはオンラインである必要があります。

すべてのプラットフォームで動作するために、このプラグインは各独自の API の代わりに独自の API を提供します。 Google Maps JavaScript API v3 similar toコードを作成できます。

機能比較表

Google マップ JavaScript API v3 Cordova-プラグイン-GoogleMaps(Android,iOS) Cordova-プラグイン-GoogleMaps(ブラウザ)
レンダリングシステムJavaScript + HTML JavaScript + ネイティブ API JavaScript
オフラインマップ不可能可能（表示エリアのみ）不可能
3Dビュー不可能可能不可能
プラットフォームすべてのブラウザAndroid および iOS アプリケーションのみすべてのブラウザ
タイル画像ビットマップベクタービットマップ

クラス比較表

Google マップ JavaScript API v3 Cordova-プラグイン-GoogleMaps
google.maps.地図地図
google.maps.マーカーマーカー
google.maps.InfoWindowデフォルトの情報ウィンドウと HtmlInfoWindow
google.maps.Circle丸
google.maps.Rectangleポリゴン
google.maps.ポリラインポリライン
google.maps.ポリゴンポリゴン
google.maps.GroundOverlayグラウンドオーバーレイ
google.maps.ImageMapTypeタイルオーバーレイ
google.maps.MVCオブジェクト基本クラス
google.maps.MVCArray BaseArrayClass
google.maps.ジオコーダーplugin.google.maps.geocoder
google.maps.geometry.spherical plugin.google.maps.geometry.spherical
google.maps.geometry.encoding plugin.google.maps.geometry.encoding
google.maps.geometry.poly plugin.google.maps.geometry.poly
（利用不可）マーカークラスター
google.maps.KmlLayer Kmlオーバーレイ
（利用不可）位置情報サービス
google.maps.ストリートビューストリートビュー
google.maps.Data （利用不可）
google.maps.DirectionsService （利用不可）
google.maps.DistanceMatrixService （利用不可）
google.maps.TransitLayer （利用不可）
google.maps.places.* （利用不可）
google.maps.visualization.* （利用不可）

このプラグインはどのように機能しますか (Android、iOS)?

このプラグインはネイティブ マップ ビューを生成し、ブラウザーの下に配置します。

マップ ビューは HTML 要素ではありません。これは、それらが<div>または HTML 関連のものではないことを意味します。ただし、マップ ビューに含まれる<div>を使用して、マップ ビューのサイズと位置を指定できます。

このプラグインは、アプリケーションの背景をtransparentに変更します。次に、プラグインはタッチ位置を検出します。これは、 native mapまたはhtml element (マップ上または画面上の任意の場所にある可能性があります) を対象としています。

このプラグインの利点は、どの HTML 要素がマップ上にあるかどうかを自動的に検出できることです。

たとえば、下の画像では、ヘッダー div (マップ ビューの上にある) をタップしたとします。プラグインは、タップがヘッダー div に対するものであるかマップ ビューに対するものであるかを検出し、タッチ イベントを適切に渡します。

これは、HTML 要素と同様にネイティブの Google マップ ビューを使用できることを意味します。

公式コミュニティ

  • Gitter : (@Hirbod によって管理)

    https://gitter.im/nightstomp/cordova-plugin-googlemaps

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて