Couple questions

[gbrits]

Hi guys, firstly - thanks a lot for building this out, it has so far met the requirements for my app!

Just a few questions:

Can I fitBounds to my markers?

It possible to style the map?

Is it possible to draw polylines between markers?

Would it be possible to create a dragging left to right slider that would then show up markers & draw a line between them?

Any assistance would be appreciated!

[gbrits]

Managed to set a polyline along all my points, with:

var points = [];
for (var i = 0; i < markers.length; i++) {
    points.push({
        longitude: Number(markers[i].longitude),
        latitude: Number(markers[i].latitude)
    });
}

CapacitorGoogleMaps.addPolyline({ points: points });

Doesn't appear to be something I can style, though. (Stroke width etc.)

[hemangsk]

Getting this error, when attempting to style the map:

[error] - Unhandled Promise rejection: undefined is not a function (near '...CapacitorGoogleMaps.setMapStyle...') ; Zone: <root> ; Task: null ; Value: {}

Both with:

CapacitorGoogleMaps.setMapStyle("[{\"featureType\":\"all\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"simplified\"}]},{\"featureType\":\"administrative\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"on\"}]},{\"featureType\":\"landscape\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"on\"},{\"hue\":\"#ff0000\"}]},{\"featureType\":\"poi.business\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"simplified\"},{\"lightness\":\"60\"},{\"saturation\":\"7\"},{\"weight\":\"0.20\"}]}]")

As well as

CapacitorGoogleMaps.setMapStyle({ jsonString: "[{\"featureType\":\"all\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"simplified\"}]},{\"featureType\":\"administrative\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"on\"}]},{\"featureType\":\"landscape\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"on\"},{\"hue\":\"#ff0000\"}]},{\"featureType\":\"poi.business\",\"elementType\":\"all\",\"stylers\":[{\"visibility\":\"simplified\"},{\"lightness\":\"60\"},{\"saturation\":\"7\"},{\"weight\":\"0.20\"}]}]" })

Can you try using JSON.stringify? This works for me:

CapacitorGoogleMaps.setMapStyle({
      jsonString: JSON.stringify([
        {
          "featureType": "all",
          "stylers": [
            { "color": "#C0C0C0" }
          ]
        }, {
          "featureType": "road.arterial",
          "elementType": "geometry",
          "stylers": [
            { "color": "#CCFFFF" }
          ]
        }, {
          "featureType": "landscape",
          "elementType": "labels",
          "stylers": [
            { "visibility": "off" }
          ]
        }
      ])
    })

[hemangsk]

Just noticed setMapStyle only working with android, needs an iOS fix. Thanks for reporting this!

[hemangsk]

Fix released in 0.0.5

[gbrits]

Awesome, guess it pays to interact with repositories in discussion :) I'd love to contribute, but I have absolutely no idea how to edit the swift side of things where you control the native side of things. Any resources you can point me to that would be helpful!

Also, a couple of other things I'm not getting right at the moment -- fitting around the boundary of markers, fitBounds or something similar - is there a way to achieve that with this library? Also is there any way to invoke the snippet info of a marker to show programatically? Also, how to change the zoom level? It's not working for me on iOS

[hemangsk]

No worries, I'm also a novice with swift side of things. https://capacitorjs.com/docs/plugins/ios is a holy grail and good first guide. It goes over the concept of "bridge". The guide covers all aspects of adding native functionality. so for example, in order to add / debug something like setMapStyle, this is the list of files we need to deal with:

• https://github.com/hemangsk/capacitor-googlemaps-native/blob/master/src/definitions.ts#L111
• https://github.com/hemangsk/capacitor-googlemaps-native/blob/master/ios/Plugin/Plugin.m#L11
• https://github.com/hemangsk/capacitor-googlemaps-native/blob/master/ios/Plugin/Plugin.swift#L314

Re other questions:

• I think the functionality of fit bounds does not exist yet in this plugin, but not impossible to add.
• Checkout setCamera for zoom level changing

[gbrits]

These are great resources, I’m reading the Swift side now. One last thing.. can you explain how you edit an existing project like yours locally? Like if I wanted to make adjustments to this repository, test it locally with the swift changes & then commit the fixes?

[gbrits]

➜ gbrits git:(master) ✗ npm link capacitor-googlemaps-native@latest

• [email protected]
  added 3 packages from 3 contributors in 2.337s

Is this now my local copy?

[hemangsk]

To ensure if npm link is setup correctly, check if the package.json of your ionic project has the "file" prefix in the version field of "capacitor-googlemaps-native",

"dependencies": {
...
    **"capacitor-googlemaps-native": "file:../capacitor-googlemaps-native",**
...
  }```

[hemangsk]

Ok I think I understand the problems with setCamera, its actually not declared properly. The definitions are missing from definition.ts and ios/Plugin.m

[gbrits]

I was way off then, and after using npm link it doesn't show file:... it still shows 0.0.5. Am I supposed to git clone or anything of the sort before editing the library? or can I just edit the files (via xcode) under Pods > Development Pods. Or am I doing it totally wrong? Sorry for the nagging questions.

[hemangsk]

Yeah, you need to have a local copy of the plugin via git clone. Then just follow the steps at https://capacitorjs.com/docs/plugins/workflow#local-testing

Yes we can edit the files directly under Development pods, but ofc if you don't do npm link with a local copy of the plugin before editing under development pods, all the edits will just remain inside your node_modules/capacitor-googlemaps-native and won't be "commit-able". In order to make sure you can push your edits to git later, the local copy is needed.

Ah no worries about the questions, We just unraveled 2 bugs during this discussion so I'll call it a productive day :D