nativescript/google-maps Documentation

[MikeBrsk]

I have Google Maps working and loading correctly, but I am struggling to find any documentation for this package - not even to drop a marker. Is there a guide to explain the basics, such as panning and dropping a marker on a given lat/long?

[triniwiz]

Hi sorry about this we will be adding it soon, hopefully this might help you out.

[MikeBrsk]

Thank you, this does help a lot. Appreciate the fast response

[hanzymester]

How to remove all added markers:

function onMapReady(args) {
mapView = args.map
// this will remove added markers:
mapView.clear()
}

[vicmasa]

Hello friends.
It also doesn't show how to get the position of the center of the map (latitude and longitude). The latitude and longitude of the map, it seems that they are not observable objects.

[triniwiz]

@vicmasa map.cameraPosition.target should have those

function onMapReady(args) {
 const map = args.map;

map.cameraPosition.target

}

[DanLatimer]

I just spent a week reading source code and making assumptions to try to work with the new google maps library due to lack of documentation.

Thought I'd post a few of the things I learned here for others also struggling

Grab access to the GoogleMaps object on map ready

<!-- angular template example -->
<MapView  (ready)="onReady($event)"></MapView>

// angular ts example
public onReady(event): void {
  this.map = event.map
}

To create/remove markers/polylines/polygons/circles there are functions on the map that accept those object's respective options. Similar to the js api but not the same, you can't just add the map to the objects and they'll apear on the map like the js api, you need to call createMarker/removeMarker etc.

// GoogleMap definition
export class GoogleMap implements IGoogleMap {
	mapStyle: Style;
	addTileOverlay(options: TileOverlayOptions): TileOverlay;
	removeTileOverlay(overlay: TileOverlay);
	buildingsEnabled: boolean;
	maxZoomLevel: number;
	minZoomLevel: number;
	myLocationEnabled: boolean;
	trafficEnabled: boolean;
	readonly uiSettings: IUISettings;
	cameraPosition: CameraPosition;
	readonly projection: Projection;
	readonly native: any;
	addCircle(circle: CircleOptions): Circle;
	addMarker(marker: MarkerOptions): Marker;
	clear();
	removeCircle(circle: Circle);
	removeMarker(marker: Marker);
	addGroundOverlay(options: GroundOverlayOptions): GroundOverlay;
	addPolygon(options: PolygonOptions): Polygon;
	addPolyline(options: PolylineOptions): Polyline;
	removeGroundOverlay(groundOverlay: GroundOverlay);
	removePolygon(polygon: Polygon);
	removePolyline(polyline: Polyline);
	animateCamera(update: CameraUpdate);
	snapshot(): Promise<ImageSource>;
}

To move the camera to a bounding box around the markers

const coords: Coordinate[] = markers.map(marker => ({
  lat: marker.position.lat,
  lng: marker.position.lng
}))
const cameraUpdate = CameraUpdate.fromCoordinates(coords, get10PercentPadding())

map.animateCamera(cameraUpdate)

function get10PercentPadding(): number {
  const height = Screen.mainScreen.heightDIPs
  const width = Screen.mainScreen.widthDIPs
  const minSide = _.min([height, width]) // lodash, you might not have this library but you can implement this in another way

  const paddingScreenPercent = 0.1
  return minSide * paddingScreenPercent
}

to set the map tile type (satellite, hybrid, normal etc), this method seems to be undocumented even in the .d.ts file. I was able to access it off MapView._map.setMapType() but I believe that MapView._map /is/ just the GoogleMap instance so you should be able to access it without using that private, I just didn't have the GoogleMap where I was working in the code so I can't say for sure.

//(map as MapView)._map.setMapType(tileType)
// possibly the GoogleMap instance?
map.setMapType(tileType)

export enum GoogleMapType {
  Normal = 1,
  Satellite = 2,
  Terrain = 3,
  Hybrid = 4
}

[chingcui]

Could you check if the sample code for showing the info window is working? I am using the same sample code, and when I click on the marker, it only shows the title of the marker, not the custom info window with the StackLayout defined in the sample. thanks.

[liamcharmer]

Any docs with regard to how to add markers?

[chingcui]

check this sample https://gist.github.com/triniwiz/3b410bce5d126326036efec58f6cba5c

[Semurak]

Hello, is there an easy way to get the bounds of the current view? Maybe with an event like "onBboxChanged"?

Thanks!

[triniwiz]

Have you tried cameraPosition event ? https://docs.nativescript.org/plugins/google-maps.html#events

[Semurak]

No, but this is the first step to check for changes! Thanks!

How can I calculate the bounds from cameraPosition target? Target is the center of the map, Right?

Edit: Maybe it could be done via Projection -> visibleRegion -> latLngBounds from SDK but this property is sadly not exposed in the plugin.

[herefishyfish]

Maybe it could be done via Projection -> visibleRegion -> latLngBounds from SDK but this property is sadly not exposed in the plugin.

Is that not just

const region = this.map.projection.visibleRegion();
let bounds = [
  [region.nearLeft.lat, region.nearLeft.lng],
  [region.farRight.lat, region.farRight.lng],
];

?

[Semurak]

Maybe it could be done via Projection -> visibleRegion -> latLngBounds from SDK but this property is sadly not exposed in the plugin.

Is that not just

const region = this.map.projection.visibleRegion();
let bounds = [
  [region.nearLeft.lat, region.nearLeft.lng],
  [region.farRight.lat, region.farRight.lng],
];

?

Well, yes and no. It's a workaround, but it's not correct for a map with tilting and bearing.

For my project it's enough, but you should expect wrong bounding boxes for edge cases.

Thanks for the reply and help! 😊