Nativescript Google Maps Is Having Troulbe With Google Play Services Please Try Again
dapriett / nativescript-google-maps-sdk Goto Github PK
View Code? Open in 1sVSCode Editor NEWCross Platform Google Maps SDK for Nativescript
License: MIT License
nativescript-google-maps-sdk's Introduction
NativeScript plugin for the Google Maps SDK
This is a cross-platform (iOS & Android) Nativescript plugin for the Google Maps API.
Prerequisites
iOS - Cocoapods must be installed.
Android - The latest version of the Google Play Services SDK must be installed.
Google Maps API Key - Visit the Google Developers Console, create a project, and enable the Google Maps Android API and Google Maps SDK for iOS APIs. Then, under credentials, create an API central.
Installation
Install the plugin using the NativeScript CLI tooling:
Nativescript 7+
tns plugin add together nativescript-google-maps-sdk Nativescript < 7
Setup
Run across demo code included here
Come across a live demo hither
Configure API Key for Android
Nativescript < 4
Start by copying the necessary template resources files in to the Android app resources binder:
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/ Next, modify your app/App_Resources/Android/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key cord, and supercede PUT_API_KEY_HERE with the API fundamental yous created earlier.
Finally, alter your app/App_Resources/Android/AndroidManifest.xml file by inserting the following in between the <awarding> tags:
<meta-data android:name="com.google.android.geo.API_KEY" android:value="@string/nativescript_google_maps_api_key" /> Nativescript 4+
Starting time by copying the necessary template resource files in to the Android app resources folder:
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/chief/res Next, modify your app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml file by uncommenting the nativescript_google_maps_api_key string, and replace PUT_API_KEY_HERE with the API cardinal y'all created before.
Finally, modify your app/App_Resources/Android/src/master/AndroidManifest.xml file by inserting the following in between your <application> tags:
<meta-data android:name="com.google.android.geo.API_KEY" android:value="@cord/nativescript_google_maps_api_key" /> The plugin will default to the latest bachelor version of the Google Play Services SDK for Android. If y'all need to change the version, you tin add a project.ext belongings, googlePlayServicesVersion, like and so:
// /app/App_Resources/Android/app.gradle project.ext { googlePlayServicesVersion = "+" } Configure API Key for iOS
In your app.js, utilize the post-obit lawmaking to add together your API key (replace PUT_API_KEY_HERE with the API primal you created before):
if (awarding.ios) { GMSServices.provideAPIKey("PUT_API_KEY_HERE"); } If you are using Athwart, modify your app.module.ts as follows:
import * as platform from "platform"; declare var GMSServices: any; .... if (platform.isIOS) { GMSServices.provideAPIKey("PUT_API_KEY_HERE"); } Calculation the MapView
Modify your view by adding the xmlns:maps="nativescript-google-maps-sdk" namespace to your <Page> tag, and so use the <maps:mapView /> tag to create the MapView:
<!-- /app/main-page.xml --> <Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:maps="nativescript-google-maps-sdk" > <GridLayout> <maps:mapView breadth="{{ breadth }}" longitude="{{ longitude }}" zoom="{{ zoom }}" bearing="{{ begetting }}" tilt="{{ tilt }}" mapAnimationsEnabled="{{ mapAnimationsEnabled }}" padding="{{ padding }}" mapReady="onMapReady" markerSelect="onMarkerSelect" markerBeginDragging="onMarkerBeginDragging" markerEndDragging="onMarkerEndDragging" markerDrag="onMarkerDrag" cameraChanged="onCameraChanged" cameraMove="onCameraMove" /> </GridLayout> </Page> Properties
The following backdrop are available for adjusting the photographic camera view:
| Property | Description and Data Type |
|---|---|
breadth | Breadth, in degrees: number |
longitude | Longitude, in degrees: number |
zoom | Zoom level (described here): number |
bearing | Begetting, in degrees: number |
tilt | Tilt, in degrees: number |
padding | Top, bottom, left and right padding amounts, in Device Independent Pixels: number[] (array) |
mapAnimationsEnabled | Whether or not to animate camera changes: Boolean |
Events
The post-obit events are bachelor:
| Event | Description |
|---|---|
mapReady | Fires when the MapView is ready for utilise |
myLocationTapped | Fires when the 'My Location' button is tapped |
coordinateTapped | Fires when a coordinate is tapped on the map |
coordinateLongPress | Fires when a coordinate is long-pressed on the map |
markerSelect | Fires when a marker is selected |
markerBeginDragging | Fires when a marker begins dragging |
markerEndDragging | Fires when a marker ends dragging |
markerDrag | Fires repeatedly while a marker is being dragged |
markerInfoWindowTapped | Fires when a marker's info window is tapped |
markerInfoWindowClosed | Fires when a marker's info window is closed |
shapeSelect | Fires when a shape (e.g., Circle, Polygon, Polyline) is selected (Annotation: you lot must explicity configure shape.clickable = true; for this effect to fire) |
cameraChanged | Fires after the photographic camera has changed |
cameraMove | Fires repeatedly while the photographic camera is moving |
indoorBuildingFocused | Fires when a building is focused on (the edifice currently centered, selected by the user or by the location provider) |
indoorLevelActivated | Fires when the level of the focused building changes |
Native Map Object
The MapView'south gMap holding gives yous admission to the platform's native map object–––consult the appropriate SDK reference on how to employ it: iOS | Android
UI Settings
You lot can adjust the map'southward UI settings after the mapReady event has fired past configuring the following properties on mapView.settings:
| Property | Description and Data Type |
|---|---|
compassEnabled | Whether the compass is enabled or not: Boolean |
indoorLevelPickerEnabled | Whether the indoor level picker is enabled or non: Boolean |
mapToolbarEnabled | ** Android only ** Whether the map toolbar is enabled or not: Boolean |
myLocationButtonEnabled | Whether the 'My Location' button is enabled or not: Boolean |
rotateGesturesEnabled | Whether the compass is enabled or not: Boolean |
scrollGesturesEnabled | Whether map scroll gestures are enabled or not: Boolean |
tiltGesturesEnabled | Whether map tilt gestures are enabled or not: Boolean |
zoomGesturesEnabled | Whether map zoom gestures are enabled or not: Boolean |
zoomControlsEnabled | ** Android just ** Whether map zoom controls are enabled or non: Boolean |
Styling
Use gMap.setStyle(style); to ready the map'south styling (Google Maps Style Reference | Styling Wizard).
Angular
Use this.mapView.setStyle(<Style>JSON.parse(this.styles)); inside of the onMapReady result handler. In this case, this.mapView is the MapView object and this.styles is a reference to a JSON file that was created using the Styling Sorcerer. The <Style> type was imported from the plugin every bit { Fashion }.
Basic Instance
// /app/main-folio.js var mapsModule = crave("nativescript-google-maps-sdk"); function onMapReady(args) { var mapView = args.object; console.log("Setting a marker..."); var marking = new mapsModule.Marker(); marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.xx); marker.title = "Sydney"; marking.snippet = "Australia"; marker.userData = { index : 1}; mapView.addMarker(marker); // Disabling zoom gestures mapView.settings.zoomGesturesEnabled = false; } role onMarkerSelect(args) { console.log("Clicked on " +args.marker.title); } part onCameraChanged(args) { console.log("Photographic camera inverse: " + JSON.stringify(args.camera)); } function onCameraMove(args) { console.log("Camera moving: "+JSON.stringify(args.camera)); } exports.onMapReady = onMapReady; exports.onMarkerSelect = onMarkerSelect; exports.onCameraChanged = onCameraChanged; exports.onCameraMove = onCameraMove; Custom Info Windows (Beta)
[!Warning] if you are using NS7
infoWindowTemplatewon't work from a xml file! a temporary solution will be declaring infoWindow Template from the code behind like this :
var mapView = null ; export function onMapReady ( args ) { mapView = args . object ; mapView . infoWindowTemplate = `<StackLayout orientation="vertical" width="200" tiptop="150" > <Label text="{{title}}" className="championship" width="125" /> <Label text="{{snippet}}" className="snippet" width="125" /> <Label text="{{'LAT: ' + position.breadth}}" className="infoWindowCoordinates" /> <Label text="{{'LON: ' + position.longitude}}" className="infoWindowCoordinates" /> </StackLayout>` ; } To use custom marking info windows, define a template in your view like then:
<!-- /app/principal-folio.xml --> <Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:maps="nativescript-google-maps-sdk" > <GridLayout> <maps:mapView mapReady="onMapReady"> <!-- Default Info Window Template --> <maps:mapView.infoWindowTemplate> <StackLayout orientation="vertical" width="200" height="150" > <Label text="{{title}}" className="championship" width="125" /> <Characterization text="{{snippet}}" className="snippet" width="125" /> <Label text="{{'LAT: ' + position.latitude}}" className="infoWindowCoordinates" /> <Label text="{{'LON: ' + position.longitude}}" className="infoWindowCoordinates" /> </StackLayout> </maps:mapView.infoWindowTemplate> <!-- Keyed Info Window Templates --> <maps:mapView.infoWindowTemplates> <template key="testWindow"> <StackLayout orientation="vertical" width="160" height="160" > <Image src="res://icon" stretch="fill" elevation="100" width="100" className="infoWindowImage" /> <Characterization text="Let'due south Brainstorm!" className="title" /> </StackLayout> </template> </maps:mapView.infoWindowTemplates> </maps:mapView> </GridLayout> </Page> ...and prepare the infoWindowTemplate belongings like then:
var marking = new mapsModule.Marker(); marking.infoWindowTemplate = 'testWindow'; This volition configure the marker to use the info window template with the given key. If no template with that key is found, then information technology volition utilize the default info window template.
** Known issue: remote images fail to brandish in iOS info windows (local images work fine)
Usage with Angular
Meet Angular demo code included hither
// /app/map-case.component.ts import {Component, ElementRef, ViewChild} from '@athwart/cadre'; import {registerElement} from "nativescript-angular/element-registry"; // Important - must register MapView plugin in order to use in Athwart templates registerElement("MapView", () => require("nativescript-google-maps-sdk").MapView); @Component({ selector: 'map-example-component', template: ` <GridLayout> <MapView (mapReady)="onMapReady($result)"></MapView> </GridLayout> ` }) export form MapExampleComponent { @ViewChild("MapView") mapView: ElementRef; //Map events onMapReady = (event) => { console.log("Map Prepare"); }; } Angular viii Support
If yous are using Athwart eight, there is a temporary fix needed for the @ViewChild directive, and will not be needed in Athwart 9:
@ViewChild("MapView", {static: false}) mapView: ElementRef; Clustering Support (Upshot #57)
There is a seperate plugin in evolution thanks to @naderio: see nativescript-google-maps-utils.
Get Help
Checking with the Nativescript community is your best bet for getting aid.
If you lot have a question, start by seeing if anyone else has encountered the scenario on Stack Overflow. If you cannot observe whatsoever information, try asking the question yourself. Brand sure to add together whatever details needed to recreate the issue and include the "NativeScript" and "google-maps" tags, so your question is visible to the NativeScript community.
If you demand more aid than the Q&A format Stack Overflow tin can provide, attempt joining the NativeScript customs Slack. The Slack chat is a swell identify to go help troubleshooting problems, as well as connect with other NativeScript developers.
Finally, if you have found an effect with the NativeScript Google Maps SDK itself, or requesting a new characteristic, please report them hither Issues.
nativescript-google-maps-sdk's People
nativescript-google-maps-sdk'due south Issues
[SOLVED] IOS - How to Open Infowindow
Hi All,
How I can open InfoWindow w/o marker and open it default...
google play services event westward/ other plugins
Compass
How can I retrieve current location and change compass condition...
How to alter map type hybrid to satellite ?
How to change map type hybrid to satellite...
How set <Page xmlns:maps="nativescript-google-maps-sdk"> in Nativescript with Angular 2 and TypeScript?
All is ok but I can't set xmlns:maps="nativescript-google-maps-sdk" fo tag and map not displayed. I know what this thing sets in .component.ts, just I don't know how make it. Please, aid me.
Map non showing after upgrading to {North} 1.five.0
The map isn't showing up in my application since upgrading to {N} ane.5.0. The map view has the Google logo on the bottom left, but it'south otherwise blank. I tried removing and re-adding the plugin, but that didn't work either.
The API key is specified in the proper file co-ordinate to the instructions, and then that's definitely not the consequence.
Android marker icon
Hi, when i try add together icon to marker i get following fault:
TypeError: Cannot read belongings 'android' of null File: "/data/information/app.test.test/files/app/tns_modules/nativescript-google-maps-sdk/map-view.js, line: 311, column: 115
I have images placed right in AppResource file (in xml element Paradigm is normal showed).
Typo - go longitude method.
Before anything else, thank you for stepping up and getting this done for the community.
There is a typo in "map-view.ios.js" at line #185
return this._ios.latitude; should exist return this._ios.longitude;
Same issue on "map-view.android.js" at line #250
return this._android.breadth; should be return this._android.longitude;
99% of map is greyness
Was able to run the demo lawmaking to run using the android emulator, only for some reason like 99% of the map is greyness and a small sliver at the bottom loads. It seems to load everything, but but a small portion of the map is visible. I've attached a screenshot. Whatever thought what'southward going on?
is fitBounds bachelor ?
I accept been trying to fit multiple markers without any luck.
It seems that fitBounds is available in iOS thru GMSCameraUpdate fitBounds, but I can not make it work, practise you have any insight ?
animateWithCameraUpdate crashes the case every bit: unrecognized selector sent to example.
Thanks,
Overlay elements (image/view) on map
Can nosotros overlay an image (e.g., a location marker stock-still at the heart) or a view (e.g., text field or search bar) on top of the map?
I tried something like this, but the elements within the <maps:mapView> tags didn't show at all:
<maps : mapView id= "map" latitude= "12.85" longitude= "77.66" mapReady= "onMapReady" > <SearchBar hint= "Enter an address..." id= "search" keyboardType= "text" /> </maps : mapView>
Couldn't launch the app on Ios
When am trying to deploy for ios i got the this error
///app/tns_modules/nativescript-google-maps-sdk/map-view.js:86:60: JS ERROR ReferenceError: Tin can't find variable: GMSMapViewDelegate
But works in android.
Permission ACCESS_FINE_LOCATION for six.0 android devices
Hello, I got an issue while trying to enable the setMyLocationEnabled on gMap.
I had to add together : in android manifest but I still got the error.
To solve it, I had to activate the permission in the setting manually .
I saw a workaround in nativescript-mapbox, then i tried without success to implement the permission asker piece of lawmaking. This look similar this :
private _fineLocationPermissionGranted = function () { console.log("In _fineLocationPermissionGranted"); var hasPermission = android.bone.Build.VERSION.SDK_INT < 23; // Android M. (half dozen.0) if (!hasPermission) { hasPermission = android.content.pm.PackageManager.PERMISSION_GRANTED == android.support.v4.content.ContextCompat.checkSelfPermission(application.android.foregroundActivity, android.Manifest.permission.ACCESS_FINE_LOCATION); } return hasPermission; }; hasFineLocationPermission = function () { console.log("In hasFineLocationPermission"); var fineLocationPermissionGranted = this._fineLocationPermissionGranted(); render new Promise(office (resolve) { resolve(fineLocationPermissionGranted); }); }; requestFineLocationPermission = function () { console.log("In requestFineLocationPermission"); var fineLocationPermissionGranted = this._fineLocationPermissionGranted(); return new Promise(function (resolve) { panel.log("In requestFineLocationPermission two"); if (!fineLocationPermissionGranted) { panel.log("In requestFineLocationPermission iii"); // in a future version nosotros could hook upwards the callback and alter this flow a scrap android.support.v4.app.ActivityCompat.requestPermissions( application.android.foregroundActivity, [android.Manifest.permission.ACCESS_FINE_LOCATION], 111); // this is non the nicest solution as the user needs to initiate scanning again subsequently granting permission, // so enhance this in a future version, only it's ok for now console.log("In requestFineLocationPermission 4"); resolve(); } }); }; I tried to call requestFineLocationPermission just Information technology never worked.
Whatever clue on how to make the app inquire for the permission?
using the sdk with angular 2
Hi, I managed to employ the plugin with angular2 but I am non able to add the issue listeners on the map tag
(markerSelect)="onMarkerSelect" (cameraChanged)="onCameraChanged" I added brackets because thats how information technology should exist in angular (I also tried without) but the functions practice not seem to be called.
Anyone has any idea?
Thanks
addMarker won't work with @Input values for Angular on Android merely
Hi @dapriett, thank you and so much for this crawly module.
I'g using this module in my app and work perfectly on ios.
If I set static values for breadth and longitude(such your example), my marker works keen.
However, If I set up the latitude and longitude with @Input, the map shows in the correct position, but the function addMarker won't show whatever icon/prototype.
The weirdest matter is that I don't have any bug. It shows all directions and values on console.dump, but I can't see the marker...
Am I the only one with this result?
PS: The issue is on Android only and with @Input values
@Component ( { selector: "my-map" , template: ` <GridLayout rows="auto,*"> <Button text="Add Marker" (tap)="addMarker($outcome)"></Push button> <MapView row="i" (mapReady)="onMapReady($event)" [breadth]="latitude" [longitude]="longitude" [zoom]="zoom" [bearing]="bearing" [tilt]="tilt" [padding]="padding" ></MapView> </GridLayout> ` , } ) export form MyMap { @Input ( ) breadth: any ; //works for the map only @Input ( ) longitude: any ; //works for the map simply // latitude: number = -33.86; //works fine // longitude: number = 151.20; //works fine zoom: number = 8 ; begetting: number = 0 ; tilt: number = 0 ; padding: Assortment < number > = [ xl , 40 , 40 , forty ] ; coreMarker: any ; @ViewChild ( "MapView" ) mapView: any ; public addMarker ( args ) { console . log ( "Setting a mark..." ) ; console . log ( 'latitude' , this . latitude ) ; //shows correctly panel . log ( 'longitude' , this . longitude ) ; //shows correctly var marker = new mapsModule . Marker ( ) ; //marker.position = mapsModule.Position.positionFromLatLng(-33.86, 151.20); //works mark . position = mapsModule . Position . positionFromLatLng ( this . latitude , this . longitude ) ; mark . userData = { alphabetize: 1 } ; this . mapView . addMarker ( marker ) ; // console.dump(marker); //shows correctly } public onMapReady ( args ) { console . log ( "onMapReady" ) ; this . mapView = args . object ; // I've tried using nativeElement, same issue } Component <my-map> usage:
< my-map [latitude]="address.breadth" [longitude]="address.longitude"> </ my-map >
PS: Other functions such as addCircle and addPolyline have the same issue.
IOS Map Animation
Hullo all,
I demand to remove google maps slide blitheness...
I have been reading on google documentation and Apple but could not find a solution...
how can I remove the slide animation on map...
updateCamera() { this.ios.animateToCameraPosition(this._createCameraPosition()); } Blastoff / Opacity for Shape, Polyline?
Is it not possible to define alpha/opacity for Shape & Polyline?
Zooming in on Android
Hey,
How can we zoom in on a map instance on Android? I tried this but it didn't piece of work:
var cuf = new com . google . android . gms . maps . CameraUpdateFactory ( ) ; gMap . animateCamera ( cuf . zoomTo ( 14 ) , 1000 , aught ) ; "Cannot read property 'android' of undefined"
Calling js method onCreateView failed
TypeError: "Cannot read property 'android' of undefined"
File: "/data/data/org.nativescript.AppName.files.app.tns_modules/nativescript-google-maps-sdk/map-view.js". line: 32, colomn: 39
Crash on load without whatsoever message
Hi,
I'grand struggling to make the plugin piece of work on android API 23 on a Mac.
Steps that I've followed :
install the plugin via tns plugin add together
Calculation the nativescript_google_maps_api_key with a freshly generated i
Removing the android platform
Building for scratch
Still my app is crashing down straight, without any warning or anything. I don't know how to adress my issue.
Without the plugin, my app works like a charm.
Matter is that one of my coworker has exactly the same app running on linux, and the app works with its build. (works also with the telephone I'm using, and his).
Thanks for your swell job !
(Running on {N} angular 2.0.0, both of us)
How to enable Show Location push button?
Hi,
I am wondering how to enable the Location Button on my map (bottom correct):
http://imgur.com/R1KFUtJ
BTW animateToLocation method of the gMap object throws error when executed:
mapView.gMap.animateToLocation(); which resulted in app crash.
Places autocompletion
Is it possible to add auto-completion to addresses entered in a text field or search bar like in apps such as Uber, etc? If yes, tin y'all please evidence an example of how to implement it?
Thanks!
Initial long and lat getting set incorrectly + simply a unmarried marking being added on android
Actually great plugin! It'southward been working wonderfully on iOS.
Having some probs on my stop for Android. I'grand on a SAMSUNG-SGH-I337 / iv.4.2
The initial lat and long in:
is getting set up incorrectly. When lat and long are in the pacific northwest it's getting set to somewhere in Africa.
in the onMapReady function I'thousand iterating through an assortment. Only the get-go mark is getting ready (and incorrectly), this is being fix somewhere in the Atlantic ocean.
vm.onMapReady = role(args) {
var mapView = args.object;
var singleReview = ReviewClassIndex();
var reviews = zero;
if(singleReview) {reviews = singleReview;}
else {reviews = ReviewClass();}
for (var east in reviews) { var lat = reviews[eastward].lat; var long = reviews[e].long; panel.dump([lat, long]); var marker = new mapsModule.Marking(); marker.position = mapsModule.Position.positionFromLatLng(lat, long); marker.title = reviews[due east].name; marker.snippet = reviews[east].desc + ' ' + reviews[east].rate + '/5'; marker.userData = { index : e + 1}; marker.review = reviews[east]; mapView.addMarker(marking); } } Is this some type of creds issue?
Got the following error. What should I do?
- What went wrong:
A problem occurred configuring root project 'teste2'.Could not resolve all dependencies for configuration ':_F0F1DebugCompile'.
Could non find any matches for com.google.android.gms:play-services-maps:+ as no versions of com.google.android.gms:play-services-maps are bachelor.
Searched in the following locations:
https://jcenter.bintray.com/com/google/android/gms/play-services-maps/maven-metadata.xml
https://jcenter.bintray.com/com/google/android/gms/play-services-maps/
Bare/White map view on iOS 8.two and nine.three.2
Hi,
I keep getting completely white map view in my project. Tested on iPhone 5S (8.2) and iPhone 6S(9.iii.2).The app works similar a charm on Android devices - the map is displayed properly.
I'm using:
- {Northward} ii.1.1 version
- {N} core-modules 2.one.4 version
- Pods version 1.0.1
- MapReady outcome is fired properly
I have Google project with enabled Google Maps SDK for iOS with proper API Key.
No javascript or native exceptions are thrown...just white map view (all other components around it are properly working - buttons, tab view, labels east.k).
Any suggestions?
Thanks
onMapReady function name in the Readme.
Please, change the correct role proper noun in the Readme on the GIT.
You have OnMapReady in the function, but exports.onMapReady.
Publish .d.ts with npm
Hi @dapriett, give thanks yous for this amazing plugin.
I was wondering if you could publish the proclamation .d.ts combined with the package?
That would be nice for IntelliSense in my IDE.
Thanks.
blank with android iv.two.ii
i'm trying to utilize the map with android 4.2.two and only shows the 'google' sign
IOS - How to InfoWindow Tap Result
How tin can I capture InfoWindow tap event ?
Become coordinates from tap
I am trying to add a marker if the user long pressed at the map. In the source code I found the coordinateTappedEvent, how can I utilise information technology?
My try with:
public onMapReady ( args ) { this . map = args . object ; this . map . on ( MapsModule . MapView . coordinateTappedEvent , ( eventData ) => { console . log ( eventData ) ; } ) ; } failed. The callback is never chosen. If information technology isn't implemented nonetheless, can I get the coordinates from the View-Tap Event?
Cheers for your help!
rename MapView#removeAllMarkers to MapView#clear
According to docs public concluding void clear () "Removes all markers, polylines, polygons, overlays, etc from the map." not but markers.
Mistake building project with google maps plugin
Hi,
I successfully built a sample app with a previous version of your plugin, however with the new version of the plugin i get build errors as shown below. I see now you have removed the dependancy on the former nativescript-plugin-google-play-services plugin.
A problem occurred configuring root project 'games'.
Could not resolve all dependencies for configuration ':_nativescript-google-maps-sdkDebugCompile'.
Could not find any matches for com.google.android.gms:play-services-maps:+ as no versions of com.google.android.gms:play-services-maps are available.
Searched in the following locations:
https://jcenter.bintray.com/com/google/android/gms/play-services-maps/maven-metadata.xml
https://jcenter.bintray.com/com/google/android/gms/play-services-maps/
file:/Users/osx/Development/nativescript/gmaps/platforms/android/libs/aar/
file:/Volumes/UserData/usr/local/opt/android-sdk/extras/android/m2repository/com/google/android/gms/play-services-maps/maven-metadata.xml
file:/Volumes/UserData/usr/local/opt/android-sdk/extras/android/m2repository/com/google/android/gms/play-services-maps/
Required by:
:gmaps:unspecified
I do take google play installed at the post-obit location:
/Volumes/UserData/usr/local/opt/android-sdk/extras/google/google_play_services/libproject/google-play-services_lib/libs/
I am new to android and gradle builds. I thought that since you had the dependency in your include.grade file that the gradle build would take care of including the google map dependency.
I know previous to the gradle integration that you had to use a library add to add together the google play jar file. Am i missing something here?
dependencies {
compile 'com.google.android.gms:play-services-maps:+'
}
Also did you have any plans on adding the my location option to your plugin?
Many thank you for a neat plugin.
Peter
marker with custom icon
I can add markers dynamically, simply I can't modify the mark icon. Marker instance for iOS on Google docs is similar that :
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.five, -0.127); GMSMarker *london = [GMSMarker markerWithPosition:position]; london.title = @"London"; london.icon = [UIImage imageNamed:@"business firm"]; london.map = mapView;
How can I add together UIImage in nativescript?
EDIT: Just realized there is an instance for this in the demo lawmaking.
Updating observables in the mapReady handler
Hullo @dapriett,
first, I'm glad that such a module be for nativescript :)
I wanted to notice that there is some strange beliefs regarding observables in the mapReady handler:
var exam = new Appreciable ( { exam: 1 } ) ; function OnMapReady ( args ) { var mapView = args . object ; var gMap = mapView . gMap ; test . set ( 'test' , 2 ) ; } //View: exam=one So when I try to change the value of the exam observable (which is jump to a view) the value in the view stays unchanged.
Changing the value outside the mapReady handler behaves every bit expected:
var test = new Observable ( { exam: 1 } ) ; examination . set ( 'examination' , ii ) ; function OnMapReady ( args ) { var mapView = args . object ; var gMap = mapView . gMap ; } // View: test=two Is there a meaningful explanation for this behavior?
Conflicts with firebase
Hello. I have been using the maps plugin and it works great. However we now take a requirement to use firebase. This plugin seems to exist conflicting with firebase with the fault below
Execution failed for task ':processF0F1F2F3DebugGoogleServices'.
Please fix the version conflict either by updating the version of the google-services plugin (information nigh the latest version is available at https://bintray.com/android/andr
oid-tools/com.google.gms.google-services/) or updating the version of com.google.android.gms to 9.0.0.
The firebase plugin we used is hither - https://github.com/EddyVerbruggen/nativescript-plugin-firebase
Any help appreciated
Unable to observe variable GMSServices
I've run tns plugin add nativescript-google-maps-sdk. When I try to run the provisional to initialize the API key on iOS, the compiler reports that it cannot detect the variable GMSServices. Any ideas how to fix it?
dynamically add markers
Cant add markers dinamically.
For example when i tap on a listitem to go a marker with the location of the taped item.
Crash
Hello,
I apply your plugin with Nativescript 1.five.ii. In debug fashion are excelent but when I build my release version the app crashes.
Android build fails when adding the plugin
Hi,
Build on Android fails on my side later on I add the plugin. Here are steps to reproduce:
- Checkout sampleGroceries app:
git clone [email protected]:NativeScript/sample-Groceries.git - Checkout "offset" branch:
git checkout start - Add together android platform:
tns platform add android - Add the plugin:
tns plugin add nativescript-google-maps-sdk - Build:
tns build android
Here is the fault:
WARNING: The file: /Users/ickata/Desktop/Tables/tns/sample-Groceries/node_modules/nativescript-google-maps-sdk/platforms/android/AndroidManifest.xml is depricated, you lot can read more than about what will be the expected plugin structure here: https://www.nativescript.org/blog/migrating-due north-android-plugins-from-version-ane.7-to-2.0 Alert: The file: /Users/ickata/Desktop/Tables/tns/sample-Groceries/node_modules/nativescript-google-maps-sdk/platforms/android/res/values/nativescript_google_maps_api.xml is depricated, you can read more about what will be the expected plugin structure hither: https://www.nativescript.org/web log/migrating-due north-android-plugins-from-version-one.seven-to-ii.0 :config phase: createDefaultIncludeFiles +found plugins: nativescript-google-maps-sdk Renaming plugin directory to flavour proper name: /Users/ickata/Desktop/Tables/tns/sample-Groceries/platforms/android/src/nativescript-google-maps-sdk -> /Users/ickata/Desktop/Tables/tns/sample-Groceries/platforms/android/src/F0 +constitute plugins: tns-core-modules-widgets Renaming plugin directory to flavor name: /Users/ickata/Desktop/Tables/tns/sample-Groceries/platforms/android/src/tns-cadre-modules-widgets -> /Users/ickata/Desktop/Tables/tns/sample-Groceries/platforms/android/src/F1 :config stage: createPluginsConfigFile Creating product flavors include.gradle file in /Users/ickata/Desktop/Tables/tns/sample-Groceries/platforms/android/configurations folder... :config stage: pluginExtend +applying configuration from: /Users/ickata/Desktop/Tables/tns/sample-Groceries/platforms/android/configurations/include.gradle +applying configuration from: /Users/ickata/Desktop/Tables/tns/sample-Groceries/platforms/android/configurations/nativescript-google-maps-sdk/include.gradle +applying configuration from: /Users/ickata/Desktop/Tables/tns/sample-Groceries/platforms/android/configurations/tns-core-modules-widgets/include.gradle :config phase: copyAarDependencies :config phase: addAarDependencies +calculation dependency: /Users/ickata/Desktop/Tables/tns/sample-Groceries/platforms/android/libs/aar/widgets-release.aar FAILURE: Build failed with an exception. * What went wrong: A trouble occurred configuring root project 'sampleGroceries'. > Could not resolve all dependencies for configuration ':_F0F1DebugCompile'. > Could not observe any matches for com.google.android.gms:play-services-maps:+ as no versions of com.google.android.gms:play-services-maps are bachelor. Searched in the post-obit locations: https://jcenter.bintray.com/com/google/android/gms/play-services-maps/maven-metadata.xml https://jcenter.bintray.com/com/google/android/gms/play-services-maps/ file:/Users/ickata/Desktop/Tables/tns/sample-Groceries/platforms/android/libs/aar/ file:/usr/local/opt/android-sdk/extras/android/m2repository/com/google/android/gms/play-services-maps/maven-metadata.xml file:/usr/local/opt/android-sdk/extras/android/m2repository/com/google/android/gms/play-services-maps/ Required by: :sampleGroceries:unspecified * Effort: Run with --stacktrace choice to become the stack trace. Run with --info or --debug option to get more log output. BUILD FAILED Total fourth dimension: eight.026 secs Command /Users/ickata/Desktop/Tables/tns/sample-Groceries/platforms/android/gradlew failed with exit lawmaking 1 # build android ┌─────────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐ │ Usage │ Synopsis │ │ General │ $ tns build android [--compileSdk <API Level>] [--key-store-path <File Path> --key-shop-password <Password> --key-store-alias <Name> --key-store-alias-countersign <Password>] [--release] │ │ │ [--static-bindings] [--copy-to <File Path>] │ └─────────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘ Builds the project for Android and produces an APK that you lot tin can manually deploy on device or in the native emulator. ### Options * --compileSdk - Sets the Android SDK that will exist used to build the project. * --release - If prepare, produces a release build. Otherwise, produces a debug build. When prepare, you must also specify the --key-store-* options. * --primal-shop-path - Specifies the file path to the keystore file (P12) which you lot want to use to code sign your APK. Yous can use the --key-store-* options along with --release to produce a signed release build. You need to specify all --key-store-* options. * --primal-store-password - Provides the password for the keystore file specified with --cardinal-store-path. You lot can use the --primal-store-* options along with --release to produce a signed release build. You lot demand to specify all --cardinal-store-* options. * --primal-shop-alias - Provides the alias for the keystore file specified with --fundamental-shop-path. You tin utilise the --key-store-* options along with --release to produce a signed release build. You lot need to specify all --fundamental-store-* options. * --key-store-alias-countersign - Provides the password for the alias specified with --key-shop-alias-password. You can use the --key-store-* options along with --release to produce a signed release build. Yous need to specify all --fundamental-store-* options. * --copy-to - Specifies the file path where the built .apk will exist copied. If it points to a non-existent directory, it will be created. If the specified value is directory, the original file name will be used. ### Attributes <API Level> is a valid Android API level. For example: 22, 23. Earlier adding the plugin I was able to build for android and to run the demo app in the emulator. So my setup should be fine.
Let me know if y'all need additional data.
The demo app crashed on start
Followed the pedagogy to build the demo for Android (tied on both emulator and existent android device). Did installed both "Google Repository" and "Google Play services" from SDK Manager, and was able to build.
BUILD SUCCESSFUL
Total time: 39.671 secs
Project successfully built
Transferring projection files...
However, got error "Unfortunately, googlemapdemo2 has stopped."
So check the log
/>adb logcat
--------- beginning of /dev/log/main D/dalvikvm( 740): GC_FOR_ALLOC freed 1750K, 36% free 8104K/12496K, paused 9ms, total 9ms D/dalvikvm( 740): GC_FOR_ALLOC freed 379K, 32% gratis 8585K/12496K, paused 15ms, full 15ms --------- offset of /dev/log/system West/ActivityManager( 740): Action break timeout for ActivityRecord{529e4878 u0 org.nativescript.googlemapdemo2/com.tns.NativeScriptActivity t47 f} W/EGL_xap ( 966): eglSurfaceAttrib not implemented E/WindowManager( 740): Starting window AppWindowToken{52c0a9b4 token=Token{529e4928 ActivityRecord{529e4878 u0 org.nativescript.googlemapdemo2/com.tns.NativeScriptActivity t47}}} timed out W/ActivityManager( 740): Activeness destroy timeout for ActivityRecord{529e4878 u0 org.nativescript.googlemapdemo2/com.tns.NativeScriptActivity t47 f} />tns info
All NativeScript components versions information ┌──────────────────┬─────────────────┬────────────────┬───────────────┐ │ Component │ Electric current version │ Latest version │ Information │ │ nativescript │ 2.0.one │ 2.0.1 │ Up to date │ │ tns-core-modules │ 2.0.1 │ 2.0.1 │ Upwardly to date │ │ tns-android │ 2.0.0 │ two.0.0 │ Up to engagement │ │ tns-ios │ │ 2.0.one │ Not installed │ └──────────────────┴─────────────────┴────────────────┴───────────────┘ package.json
{ "description": "NativeScript Application", "license": "See LICENSE IN <your-license-filename>", "readme": "NativeScript Application", "repository": "<fill-your-repository-here>", "nativescript": { "id": "org.nativescript.googlemapdemo2", "tns-android": { "version": "two.0.0" } }, "dependencies": { "nativescript-google-maps-sdk": "^ane.three.one", "tns-core-modules": "two.0.1" }, "devDependencies": { "babel-traverse": "vi.9.0", "babel-types": "vi.10.0", "babylon": "half-dozen.8.1", "filewalker": "0.i.2", "lazy": "one.0.11" } } Whatsoever idea?
Unable to build
I apply your default education.
I was wondering why this happen
iOS Build Error on Telerik Platform
Getting the following error on the Telerik Platform when trying to build a project using the google maps sdk module. We removed the module and the app built ok. Do yous have any idea why this might be?
Error: Cannot build project because module nativescript-google-maps-sdk contains insecure code. Remove the module and effort once more.
IOS build with nativescript athwart two doesn't work
When Nativescript angular2 app with https://github.com/NativeScript/nativescript-angular and GoogleMaps cocoapods is built and deployed on IOS simulator an exception is thrown like in below screenshot.
Also can y'all tell usa how we can gear up Google API key for IOS in main app.ts typescript file, currently if added in app.ts it give compile time error?
Crash on load (NS CLI 1.6.ane)
This is the first fourth dimension I'll be using the plugin but I can't seem to make it work. I downloaded and run the demo and this fault I get immediately when the app starts in the emulator (I am using Genymotion).
com.tns.NativeScriptException:
Calling js method onCreateView failed
TypeError: Cannot read property 'android' of undefined
File: "/data/data/com.myapp.myapp/files/app/tns_modules/nativescript-google-maps-sdk/map-view.js, line: 31, column: 38
StackTrace:
Frame: function:'MapView._createCameraPosition', file:'/data/data/com.myapp.myapp/files/app/tns_modules/nativescript-google-maps-sdk/map-view.js', line: 31, column: 39
Frame: function:'MapView._createUI', file:'/data/data/com.myapp.myapp/files/app/tns_modules/nativescript-google-maps-sdk/map-view.js', line: 120, column: 35
Frame: part:'View._onContextChanged', file:'/data/data/com.myapp.myapp/files/app/tns_modules/ui/core/view.js', line: 206, column: 14
Frame: function:'View._onAttached', file:'/data/data/com.myapp.myapp/files/app/tns_modules/ui/cadre/view.js', line: 164, column: xiv
Frame: office:'eachChild', file:'/data/data/com.myapp.myapp/files/app/tns_modules/ui/core/view.js', line
adding functionality for OnDraggingMarker
Hello all,
I just add to my app the OnMarkerDragListener for android, it could exist squeamish to add to your plugin
this is what I did for android
gMap.setOnMarkerDragListener(new com.google.android.gms.maps.GoogleMap.OnMarkerDragListener({ onMarkerDrag: function(gmsMarker) { return this; }, onMarkerDragEnd: office(gmsMarker) { callback(gmsMarker); render this; }, onMarkerDragStart: function(gmsMarker) { return this; } })); Now the thing is that I also desire to implement this listener to IOS but I could figure out how to exercise that, I accept been read and plant how to make the instance of GMSMapViewDelegate:
var MyMapViewDelegate = NSObject.extend({ didEndDraggingMarker: part(map, mark, event) { console.log("did drag marker with outcome"); } }, { protocols: [GMSMapViewDelegate] }); var mapViewDelegate = MyMapViewDelegate.alloc().init(); gMap.delegate = mapViewDelegate; The listener is not working with this code, could you give a hand with this. Also once listener for IOS is working we could add to the list of support events such equally markerSelect or cameraChanged
addTileOverlay and TileOptions
Hullo,
We trying to use custom tile overlay provider with your sdk just we tin can't find whatsoever solution, tin you can this characteristic?
Cluster Characteristic
Do you accept any plans to include clustering? In that location are official ways provided for android and iOS. I would dear to see clustering feature here
zooming on ios?
Great job on this plugin. I am having problem figuring out how to zoom in ios?
I can get the map and markers to come up in the emulator and on my devices, just can't seem to figure out how to get the map to zoom in on a certain spot. I've tried gMap.animatetozoom(n) and a couple of other things but tin't seem to figure out the syntax. Is at that place a sample somewhere I oasis't found for this? Whatsoever help would be greatly appreciated.
How to bind information to the map in the lawmaking backside?
Hi @dapriett - Sorry to keep bugging you! I was wondering how one binds information to the map in the xml:
<maps:mapView id="theMap" breadth = "{{ latitude }}" longitude = "{{ longitude }} zoom = "{{ zoom }}" mapReady="OnMapReady" /> from the lawmaking behind? I've tried setting the bindingContext of gMap with no luck. Whatever suggestions?
Can't observe variable: GMSServices
Hi dapriett! Cheers then much for putting this repo together! I was trying to follow along with your directions and when launching the my app on the ios emulator I get the following error:
file:///app/app.js:4:14: JS Mistake ReferenceError: Can't find variable: GMSServices I have posted my lawmaking (modulo node_packages/, platforms/) over here. If you had any communication on this error I would exist very appreciative! Thank you once again.
Source: https://coder.social/dapriett/nativescript-google-maps-sdk
0 Response to "Nativescript Google Maps Is Having Troulbe With Google Play Services Please Try Again"
Post a Comment