GetBounds, but in NativeScript - Google Maps


#1

Hello,

I am implementing Google Maps into my app using:

In my website map I can do the following to get the bounding box:

var lat0 = map.getBounds().getNorthEast().lat();
var lng0 = map.getBounds().getNorthEast().lng();
var lat1 = map.getBounds().getSouthWest().lat();
var lng1 = map.getBounds().getSouthWest().lng();

How do I go about finding the right syntax using the above addons?

As far as I got was this: GoogleMaps.Bounds()

but I cannot seem to get any farther.


#2

If you use this plugin: https://github.com/dapriett/nativescript-google-maps-sdk
It looks like you might be able to access the Bounds here. I quickly skimmed the .android file and searched for Bounds which has get/sets() so looks possible but didn’t look too deep so it might be configured incorrectly but worth a try to get an instance of your map and see if Bounds is available.

One way to see an object’s props/methods is to run console.dump(yourObject); and you’ll see everything related to the object.


#3

Thank You.

Just to reiterate:

  1. I can look in the android js files to see what is available. I started doing that last night. Glad I was on the right track.

  2. console.dump. This is cool. I just found out about console.table in the Javascript30 course the other day which works in a browser. Did not know about consule.dump.

I will work on this later today and report back.

Thank you for your help,


#4
  1. Yep the source files will show you everything.
  2. Glad to help.

If you can’t figure out the bounds I would open an issue on the plugin asking for help and then if you figure it out, submit a PR updating the readme with sample code on what you figure out :thumbsup:


#5

I have had no luck with this.

I added the dump the onCameraChanged Function

function onCameraChanged(args) {
debug("Camera changed: "+JSON.stringify(args.camera), JSON.stringify(args.camera) === lastCamera);
lastCamera = JSON.stringify(args.camera);
console.dump(args);
}

and I searched the output of that dump and did not find anything with the word bound.

I am unsure what to try next. Weird that I see a lot of references in the map-view.android.js but don’t see any reference when I dump the args.


#6

I did find this just now: console.dump(args.object.gMap);

doesn’t seem to have what I need but still researching


#7

I haven’t used that plugin or I’d be more help. Let’s back up a bit though, if that google maps plugin is adding the google maps sdk/libs then you really have access to everything being added. Even if it’s not exposed via the plugin.


#8

So I know where to go from here, how do I get access to the libs if not through the plugin? Are you suggesting I edit the plugin to expose the functionality I need or something else?

Thank You


Google Map integration
#9

You could abstract it into the plugin but you don’t have to, in fact I wouldn’t because if you ever update your dependencies (in package.json) the manual change to the source file will be overwritten so you have to remember to go change it anytime that happens. Also, you typically don’t put node_modules in a repository so others won’t have those manual changes.

The better approach, IMO, is to just tap into the api exposed by the sdk that is added via this plugin. To make sense of that, let’s suppose you didn’t even use this plugin to consume the google map sdk (which is easily done). You would add the dependency to your app’s app.gradle (it may be titled build.gradle now) file located in App_Resources/android and when you build your app the build process would find the google map dependency and package the sdk into your app exposing all of its functionality. The plugin is doing this for you here https://github.com/dapriett/nativescript-google-maps-sdk/blob/master/platforms/android/include.gradle by using the plugins include.gradle file which declares the dependency and that’s how it’s added during the build step of your app using the plugin.

That may not be the most coherent explanation ^^^ but it should be helpful to understand some things.

Okay so now that we know you have the sdk available in your app, you need to find out how to use it of course.
Take the CameraPosition class from the sdk: https://developers.google.com/android/reference/com/google/android/gms/maps/model/CameraPosition

Here is how you use that in your project: https://github.com/dapriett/nativescript-google-maps-sdk/blob/master/map-view.android.ts#L44 which is just finding the namespace and getting to the class to use it. Nothing fancy. When I’m consuming a library I usually create a const equal to it for better readability and less typing later on if it’s called multiple times like this: https://github.com/bradmartin/nativescript-panorama-imageview/blob/master/panorama-imageview.android.ts#L17

Hopefully this makes sense.


#10

I think I am following along. I will give this a try tonight/tomorrow and report back.

Thank you for taking the time to explain. Knowing this really opens my eyes to the power of NativeScript. I am no longer contained by the implementation of plugins. I can tap into any android or ios library now. This will be a fun experiment.

Granted once I have some more time in and I am more comfortable working with this I will look into upgrading that plugin to support what I want.


#11

ok I was able to add it to the app.gradle file and verify I had access to the sdk in my js file.

I have another question.

Do I have to do away with the plugin now and code everything using the sdk directly?

For example the map would need to be created with the sdk correctly so when it is passed back to my JS file I have access to all the functions?


#12

Sorry I missed this the other day.

I might be misunderstanding, but you don’t have to do away with the plugin if you don’t want to. However, the plugin should have been adding the native sdk for you already but what you did is definitely a good learning point :smile:.

Not following this :confused: [quote=“randy, post:11, topic:236”]
For example the map would need to be created with the sdk correctly so when it is passed back to my JS file I have access to all the functions?
[/quote]


#13

I will review the code again and see if it is indeed adding the native SDK. I figured it wasn’t because I didn’t have any luck getting the info I needed. I know a little bit more now than I did so maybe I can get somewhere.

If the native SDK is added then my second point is moot.