capacitor-googlemaps-native

Plugin using native Maps API for Android and iOS.

Usage no npm install needed!

<script type="module">
  import capacitorGooglemapsNative from 'https://cdn.skypack.dev/capacitor-googlemaps-native';
</script>

README

Capacitor Google Maps Plugin

Plugin using native Maps SDK for Android and iOS.

Why ?

Maps SDK for Android & iOS bring better performance and offline caching compared to JS SDK and they're free to use.

Project Status

Features Android     iOS     Current Status Pending
Map Objects

  • create()
  • Markers
    WIP
    WIP
  • addMarker() is implemented which allows you to show a marker with default tooltip design.
  • Marker icons can be set using URL.
  • Event: didTap
  • Info windows
    Business & POIs

  • Tap on any places of interest
  • Event: didTapPOIWithPlaceID
  • Lite Mode

  • create(liteMode?: boolean)
  • Not available for iOS
    Street View

    WIP
  • createStreetView()
  • Launch URL

    Controls & Gestures
    WIP
    WIP
  • settings() allow to set all the map UI settings.
  • Allow users to get current state of map settings.
    Events
    WIP
    WIP
    Camera & View

  • setCamera()
  • Allow users to get current camera position
    Location
    WIP
    WIP
  • android: enableCurrentLocation() onMyLocationButtonClick, onMyLocationClick
  • iOS: enableCurrentLocation(), myLocation()
  • API wrapping needs improvement so that it becomes consistent for both platforms
    Drawing on Map
    WIP
    WIP
    Shapes, Ground Overlays, Tile Overlays
    Utility Library

    Getting Started

    Installation

    Install package from npm

    npm i --save capacitor-googlemaps-native
    

    Install plugin dependencies in native platforms

    npx cap sync
    

    Set up Google API Keys

    You'll have two API keys by the end of this step. Lets proceed:

    Add API key to your App

    <application>
    ...
    
    <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="YOUR_ANDROID_MAPS_API_KEY"/>
    ...
    </application>
    
    • On iOS, this step is little different and mentioned below.

    Regsiter Plugin on Android

    your-plugin/android/src/main/java/MainActivity.java

    ...
    /* Import */
    import com.hemangkumar.capacitorgooglemaps.CapacitorGoogleMaps;
    ...
    
    public class MainActivity extends BridgeActivity {
      @Override
      public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    
          this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
    
          /* Add Plugin Class */
          add(CapacitorGoogleMaps.class);
    
    
         }});
      }
    }
    
    

    Importing & Initializing the plugin

    const { CapacitorGoogleMaps } = Plugins;
    
    /* initialize() is important for iOS,
      Android doesn't need any initialization.
    */
    await CapacitorGoogleMaps.initialize({
     key: "YOUR_IOS_API_KEY"
    });
    

    Usage

    An example with Angular

    component.html

    <div id="map" #map></div>
    

    component.css

    #map {
        margin: 2em 1em;
        height: 250px;
        border: 1px solid black;
      }
    

    component.ts

    @ViewChild('map') mapView: ElementRef;
    
    async ionViewDidEnter() {
        const boundingRect = this.mapView.nativeElement.getBoundingClientRect() as DOMRect;
    
        CapacitorGoogleMaps.create({
          width: Math.round(boundingRect.width),
          height: Math.round(boundingRect.height),
          x: Math.round(boundingRect.x),
          y: Math.round(boundingRect.y),
          latitude: -33.86,
          longitude: 151.20,
          zoom: 12
        });
    
        CapacitorGoogleMaps.addListener("onMapReady", async function() {
    
          /*
            We can do all the magic here when map is ready
          */
    
          CapacitorGoogleMaps.addMarker({
            latitude: -33.86,
            longitude: 151.20,
            title: "Custom Title",
            snippet: "Custom Snippet",
          });
    
          CapacitorGoogleMaps.setMapType({
            "type": "normal"
          })
        })
    }
    
    ionViewDidLeave() {
        CapacitorGoogleMaps.close();
    }
    

    Known Issues

  • Right now, its not possible to allow Map view in the template to scroll along with the Page, it remains at its fixed position.