@capacitor-community/capacitor-googlemaps-native

Plugin using native Maps API for Android and iOS.

Usage no npm install needed!

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

README


Google Maps

@capacitor-community/capacitor-googlemaps-native

Capacitor Plugin using native Google Maps SDK for Android and iOS.


Purpose

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

Maintainers

Maintainer GitHub Mail
Hemang Kumar hemangsk hemangsk@gmail.com

Support Development

If you like this plugin and use it on your projects, please consider donating to support the development. Thank you!

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-community/capacitor-googlemaps-native
    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.

    Importing & Initializing the plugin

    import { CapacitorGoogleMaps } from '@capacitor-community/capacitor-googlemaps-native';
    
    /* 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.

    Contributors ✨

    Thanks goes to these wonderful people (emoji key):


    Grant Brits

    💻 🐛 🤔

    Tafel

    💻 🐛 🤔

    abcoskn

    💻 🐛

    Hyun Yang

    🐛 💡

    Melanie Marval

    🐛

    l4ke

    🐛

    Ben Grossman

    🐛

    Gercil Junio

    📓

    Alauddin Afif Cassandra

    📓

    togro

    🐛 📓

    selected-pixel-jameson

    🐛

    chikalio

    🐛

    This project follows the all-contributors specification. Contributions of any kind welcome!