ionic-team / capacitor-google-maps Goto Github PK

Bug Report

map.setCamera() @Angle@ parameter crashes app when receiving a 3 digit number

Plugin(s)

"@capacitor/google-maps": "^5.0.0"

Capacitor Version

 Capacitor Doctor   

Latest Dependencies:       

  @capacitor/cli: 5.7.4    
  @capacitor/core: 5.7.4   
  @capacitor/android: 5.7.4
  @capacitor/ios: 5.7.4    

Installed Dependencies:    

  @capacitor/cli: 5.5.1    
  @capacitor/core: 5.5.1   
  @capacitor/android: 5.5.1
  @capacitor/ios: 5.5.1    

Platform(s)

Android
(iOS not checked)

Current Behavior

after creating a map with GoogleMap.create(), using setCamera() on the map to set camera position and angle, if putting a 3 digit number in the angle argument the app crashes.

Expected Behavior

app not crashing and angle reverting to highest valid input (45)

Code Reproduction

this.map!.setCamera({ zoom: 18, bearing, coordinate, animate: true, angle: 100 }).then()

Other Technical Details

Additional Context

Feature Request

Plugin

• capacitor-google-maps

Description

Being able to change the style of marker clusterer

Preferred Solution

Being able to change the render class while enabling the clustering.

googleMap.enableClustering(5, customRenderer)

Then anyone could fiddle with it by passing a custom renderer

// Example
import { Cluster, ClusterStats, DefaultRenderer, Marker } from '@googlemaps/markerclusterer';

export class CustomRenderer extends DefaultRenderer {

  constructor() {
    super()
  }
  
  render({ count, position }: Cluster, stats: ClusterStats, map: google.maps.Map): Marker {
    const color =
      count > Math.max(10, stats.clusters.markers.mean)
        ? "#ff0000" // <-- Change the color here
        : "#0000ff";

    // create svg url with fill color
    const svg = window.btoa(`
    <svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
      <circle cx="120" cy="120" opacity=".6" r="70" />
      <circle cx="120" cy="120" opacity=".3" r="90" />
      <circle cx="120" cy="120" opacity=".2" r="110" />
      <circle cx="120" cy="120" opacity=".1" r="130" />
    </svg>`);

    // create marker using svg icon
    return new google.maps.Marker({
      position,
      icon: {
        url: `data:image/svg+xml;base64,${svg}`,
        scaledSize: new google.maps.Size(45, 45),
      },
      label: {
        text: String(count),
        color: "rgba(255,255,255,0.9)",
        fontSize: "12px",
      },
      // adjust zIndex to be above other markers
      zIndex: 1000 + count,
    });
   }
}

Alternatives

We could instantiate a CustomRenderer object and be able to change the style & logic of it from other methods.

Additional Context

• How to
• Angular did found a solution to make us being able to change the style.

Is there a way to make this work with the latest version of capacitor?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @capacitor/[email protected]
npm ERR! node_modules/@capacitor/core
npm ERR!   @capacitor/core@"^6.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @capacitor/core@"^5.0.0" from @capacitor/[email protected]
npm ERR! node_modules/@capacitor/google-maps
npm ERR!   @capacitor/google-maps@"^5.4.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Feature Request

Plugin

Google maps

Description

As a developer, I would like to move the Google logo to a different position. If the app uses a bottom drawer in its UI, the logo will be hidden and will break the terms of usage of the Google API.

Platform(s)

IOS, Android

Preferred Solution

Adding some configs to the createMap method.

currently using version 5.4.1
"@capacitor/google-maps": "^5.4.1",

I'm using the maps succesfully but i have a few issues with it.

Within my app i have multiple pages and the user can move around to show different data.
But after a user has been to a page with a MAP on it and then navigates away to another page which does not have a map, while the page is transitioning the MAP below webview is visible

I have tried to DESTROY the map and i store the google_map in a global variable so i can try and remove it where ever my users go...

But becuase the map is on the below the webview i can never get rid of this shadow of map.

How do other people cope with using the map - but then navigating to other pages which it out it look terrible.

Also when i destroy the map... and then go back to page which has a map - the previous one is still present for a moment with all the old map icons on it.

Implementation lacks icons property for both platforms.

Files CapacitorGoogleMapPolyline.kt and Polyline.swift missing processing given icon value (3.0 for example).