0.0.6 • Published 4 years ago

capacitor-googlemaps-native v0.0.6

Weekly downloads
44
License
MIT
Repository
github
Last release
4 years ago

Why ?

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

Project Status

FeaturesAndroid    iOS    Current StatusPending
Map Objectscreate()
MarkersWIPWIPaddMarker() is implemented which allows you to show a marker with default tooltip design. Marker icons can be set using URL. Event: didTapInfo windows
Business & POIsTap on any places of interest Event: didTapPOIWithPlaceID
Lite Modecreate(liteMode?: boolean)Not available for iOS
Street ViewWIPcreateStreetView()
Launch URL
Controls & GesturesWIPWIPsettings() allow to set all the map UI settings.Allow users to get current state of map settings.
EventsWIPWIP
Camera & ViewsetCamera()Allow users to get current camera position
LocationWIPWIPandroid: enableCurrentLocation() onMyLocationButtonClick, onMyLocationClick iOS: enableCurrentLocation(), myLocation()API wrapping needs improvement so that it becomes consistent for both platforms
Drawing on MapWIPWIPShapes, 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

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago