Skip to content

Commit 0145aba

Browse files
herefishyfishherefishyfish
authoredMar 14, 2025
chore(google-maps): update docs (#618)
* docs(google-maps): update section headers for consistency in README * docs(google-maps): reorganize and enhance README
1 parent da72bf2 commit 0145aba

File tree

1 file changed

+104
-105
lines changed

1 file changed

+104
-105
lines changed
 

‎packages/google-maps/README.md

+104-105
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@ A plugin that allows you to use the [Maps SDK](https://developers.google.com/map
99
* [Use @nativescript/google-maps with Core](#use-nativescriptgoogle-maps-with-core)
1010
* [Use @nativescript/google-maps with Angular](#use-nativescriptgoogle-maps-with-angular)
1111
* [Use @nativescript/google-maps with Vue](#use-nativescriptgoogle-maps-with-vue)
12-
* [Control the camera](#control-the-camera)
13-
* [Set the map type](#set-the-map-type)
14-
* [Styling The Map](#styling-the-map)
1512

1613
* [API](#api)
1714
* [MapView Class](#mapview-class)
@@ -20,10 +17,14 @@ A plugin that allows you to use the [Maps SDK](https://developers.google.com/map
2017
* [GoogleMap Object](#googlemap-object)
2118
* [Properties](#properties)
2219
* [Methods](#methods)
23-
* [Camera Position](#camera-position)
24-
* [Projection](#projection)
25-
* [UISettings](#uisettings-interface)
26-
* [MapType enum](#maptype-enum)
20+
* [Control the camera](#control-the-camera)
21+
* [Camera Position](#camera-position)
22+
* [Projection](#projection)
23+
* [Map Customization](#map-customization)
24+
* [UISettings](#uisettings-interface)
25+
* [Setting the map type](#setting-the-map-type)
26+
* [MapType enum](#maptype-enum)
27+
* [Styling The Map](#styling-the-map)
2728
* [Markers](#markers)
2829
* [Adding Markers](#adding-markers)
2930
* [Marker Object](#marker-object)
@@ -171,15 +172,6 @@ import { GoogleMapsModule } from '@nativescript/google-maps/angular';
171172
```
172173
2. Add [MapView](#mapview-class) to your markup.
173174

174-
```html
175-
<MapView
176-
(mapTap)="onTap($event)"
177-
(mapLongPress)="onLongPress($event)"
178-
(markerTap)="onMarkerTap($event)"
179-
>
180-
</MapView>
181-
```
182-
3. Manage
183175
```html
184176
<MapView
185177
(ready)="onReady($event)"
@@ -228,76 +220,7 @@ app.use(GoogleMaps)
228220
229221
3. To manage the mapping features, listen to the map view's `ready` event and get the reference to the [GoogleMap](#googlemap-object) instance from the event data.
230222

231-
### Control the camera
232-
233-
To programmatically update the camera position, call the `animateCamera()` method on the `GoogleMap` object and pass it a [CameraUpdate](#cameraupdate-class) instance.
234-
```ts
235-
import { CameraUpdate } from '@nativescript/google-maps';
236-
237-
googleMap.animateCamera(
238-
CameraUpdate.fromCoordinate({
239-
lat: -32.1234,
240-
lng: 125.1234
241-
},
242-
googleMap.cameraPosition.zoom
243-
)
244-
);
245-
```
246-
247-
### Set the map type
248-
249-
To set the map type, set the `mapType` property to one of the [MapType](#maptype-enum) options.
250-
251-
```ts
252-
import { GoogleMap, MapType } from '@nativescript/google-maps';
253-
254-
map: GoogleMap;
255-
map.mapType = MapType.Hybrid;
256-
```
257-
See [CameraUpdate](#cameraupdate-class) for more methods you can call and pass to the `animateCamera()` method.
258-
259-
### Styling the map
260-
261-
You can style the map's items, such as roads, parks, businesses, and other points of interest.
262-
263-
Styling works only on the [normal](#maptype-enum) map type. Styling does not affect indoor maps.
264-
265-
To style your map, use a JSON file generated by the [Google Maps APIs Styling Wizard](https://mapstyle.withgoogle.com). In addition to changing the appearance of features, you can also hide features completely.
266-
```json
267-
[
268-
{
269-
"featureType": "all",
270-
"stylers": [
271-
{ "color": "#C0C0C0" }
272-
]
273-
},{
274-
"featureType": "road.arterial",
275-
"elementType": "geometry",
276-
"stylers": [
277-
{ "color": "#CCFFFF" }
278-
]
279-
},{
280-
"featureType": "landscape",
281-
"elementType": "labels",
282-
"stylers": [
283-
{ "visibility": "off" }
284-
]
285-
}
286-
]
287-
```
288-
To apply a custom style to your map you can set the `mapStyle` property on your `GoogleMap` object:
289-
```ts
290-
import { GoogleMap } from '@nativescript/google-maps';
291223

292-
map: GoogleMap;
293-
map.mapStyle = [{
294-
"featureType": "landscape",
295-
"elementType": "labels",
296-
"stylers": [
297-
{ "visibility": "off" }
298-
]
299-
}];
300-
```
301224
## API
302225

303226
### MapView Class
@@ -348,13 +271,14 @@ The following properties are available for adjusting the camera view on initiali
348271

349272
### GoogleMap Object
350273

351-
This class provides the mapping features and its instance is available from the [MapView](#mapview-class) instance's `ready` [event](#events):
274+
This class encapsulates the core, cross-platform mapping features. Its instance is made available when the [MapView](#mapview-class) fires the `ready` [event](#events), and this is where you'll perform the majority of your mapping tasks.
352275

353276
```ts
354277
function onReady(event: MapReadyEvent) {
355278
const map: GoogleMap = event.map;
356279
}
357280
```
281+
358282
#### Properties
359283
| Property | Type |Description
360284
:--------------- |:-----|:---------------------------------
@@ -395,6 +319,24 @@ function onReady(event: MapReadyEvent) {
395319

396320
consult the appropriate SDK reference on how to use it: [iOS](https://developers.google.com/maps/documentation/ios-sdk/reference/interface_g_m_s_map_view) | [Android](https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap)
397321

322+
## Control the camera
323+
324+
To programmatically update the camera position, call the `animateCamera()` method on the `GoogleMap` object and pass it a [CameraUpdate](#cameraupdate-class) instance.
325+
```ts
326+
import { CameraUpdate } from '@nativescript/google-maps';
327+
328+
googleMap.animateCamera(
329+
CameraUpdate.fromCoordinate({
330+
lat: -32.1234,
331+
lng: 125.1234
332+
},
333+
googleMap.cameraPosition.zoom
334+
)
335+
);
336+
```
337+
338+
See [CameraUpdate](#cameraupdate-class) for more methods you can call and pass to the `animateCamera()` method.
339+
398340

399341
### Camera Position
400342

@@ -432,6 +374,8 @@ A projection is used to translate between on screen location and geographic coor
432374
| `toScreenLocation(coordinate: Coordinate)` | Returns a screen location that corresponds to a geographical coordinate.
433375
| `containsCoordinate(coordinate: Coordinate)` | Returns true if the coordinate is visible in the current viewport.
434376

377+
## Map Customization
378+
435379
### UISettings Interface
436380

437381
You can adjust the maps UI settings from the `GoogleMap` object by configuring the following properties of the `uiSettings` property:
@@ -449,6 +393,17 @@ You can adjust the maps UI settings from the `GoogleMap` object by configuring t
449393
| `zoomControlsEnabled` | `boolean` | Whether map zoom controls are enabled or not
450394
| `scrollGesturesEnabledDuringRotateOrZoom` | `boolean` | Whether scroll gestures are enabled while rotating or zooming
451395

396+
### Setting the map type
397+
398+
To set the map type, set the `mapType` property to one of the [MapType](#maptype-enum) options.
399+
400+
```ts
401+
import { GoogleMap, MapType } from '@nativescript/google-maps';
402+
403+
map: GoogleMap;
404+
map.mapType = MapType.Hybrid;
405+
```
406+
452407
### MapType enum
453408

454409
The Google Maps API offers the following five types of maps:
@@ -461,9 +416,52 @@ The Google Maps API offers the following five types of maps:
461416
| `Terrain` | Topographic data. The map includes colors, contour lines and labels, and perspective shading. Some roads and labels are also visible.
462417
| `Hybrid` | Satellite photograph data with road maps added. Road and feature labels are also visible.
463418

464-
### Markers
419+
### Styling the map
420+
421+
You can style the map's items, such as roads, parks, businesses, and other points of interest.
422+
423+
Styling works only on the [normal](#maptype-enum) map type. Styling does not affect indoor maps.
424+
425+
To style your map, use a JSON file generated by the [Google Maps APIs Styling Wizard](https://mapstyle.withgoogle.com). In addition to changing the appearance of features, you can also hide features completely.
426+
```json
427+
[
428+
{
429+
"featureType": "all",
430+
"stylers": [
431+
{ "color": "#C0C0C0" }
432+
]
433+
},{
434+
"featureType": "road.arterial",
435+
"elementType": "geometry",
436+
"stylers": [
437+
{ "color": "#CCFFFF" }
438+
]
439+
},{
440+
"featureType": "landscape",
441+
"elementType": "labels",
442+
"stylers": [
443+
{ "visibility": "off" }
444+
]
445+
}
446+
]
447+
```
448+
To apply a custom style to your map you can set the `mapStyle` property on your `GoogleMap` object:
449+
```ts
450+
import { GoogleMap } from '@nativescript/google-maps';
451+
452+
map: GoogleMap;
453+
map.mapStyle = [{
454+
"featureType": "landscape",
455+
"elementType": "labels",
456+
"stylers": [
457+
{ "visibility": "off" }
458+
]
459+
}];
460+
```
465461

466-
#### Adding Markers
462+
## Markers
463+
464+
### Adding Markers
467465

468466
You can create markers using the [GoogleMap](#googlemap-object)'s object `addMarker` method by passing it a [MarkerOptions](#markeroptions) object.
469467

@@ -499,13 +497,14 @@ function addMarker(map: GoogleMap, markerOptions: MarkerOptions): Marker {
499497
| `anchorV` | `number` | Vertical icon offset from the marker position
500498
| `userData` | `any` | Additional information assigned to the marker
501499
| `zIndex` | `number` | Z-index of the marker
502-
### Coordinate
500+
501+
#### Coordinate
503502
| Property | Type
504503
|:---------|:----
505504
| `lat` | `number`
506505
| `lng` | `number`
507506

508-
#### Removing Markers
507+
### Removing Markers
509508

510509
To remove a marker from the map, call the `removeMarker()` method on the [GoogleMap](#googlemap-object) instance and pass it the marker to be removed.
511510

@@ -514,7 +513,8 @@ function removeMarker(map: GoogleMap, marker: Marker) {
514513
map.removeMarker(marker);
515514
}
516515
```
517-
### Circles
516+
517+
## Circles
518518

519519
### Adding Circles
520520

@@ -541,7 +541,7 @@ function addCircle(map: GoogleMap, circleOptions: CircleOptions): Circle {
541541
`zIndex` | `number` |
542542
`userData` | `{ [key: string]: any }` |
543543

544-
#### Removing Circles
544+
### Removing Circles
545545

546546
You can remove a circle using the [GoogleMap](#googlemap-object)'s `removeCircle()` method.
547547

@@ -550,8 +550,8 @@ function removeCircle(map: GoogleMap, circle: Circle) {
550550
map.removeCircle(circle);
551551
}
552552
```
553-
### Polygons
554-
#### Adding Polygons
553+
## Polygons
554+
### Adding Polygons
555555

556556
You can create polygons using the [GoogleMap](#googlemap-object)'s object `addPolygon()` method by passing in the specified [PolygonOptions](#polygonoptions).
557557

@@ -560,7 +560,7 @@ function addPolygon(map: GoogleMap, polygonOptions: PolygonOptions): Polygon {
560560
return map.addPolygon(polygonOptions);
561561
}
562562
```
563-
### PolygonOptions
563+
#### PolygonOptions
564564

565565
| Property | Type
566566
|:---------|:-----
@@ -587,8 +587,8 @@ function removePolygon(map: GoogleMap, polygon: Polygon) {
587587
}
588588
```
589589

590-
### Polylines
591-
##### Adding Polylines
590+
## Polylines
591+
### Adding Polylines
592592

593593
You can create Polylines using the [GoogleMap](#googlemap-object)'s object `addPolyline` function by passing it a [PolylineOptions](#polylineoptions) object.
594594

@@ -614,7 +614,7 @@ function addPolyline(map: GoogleMap, polylineOptions: PolylineOptions): Polyline
614614
| `endCap` | Cap & Partial\<NativeObject\> |
615615
| `userData` | `{ [key: string]: any }` |
616616

617-
#### Removing Polylines
617+
### Removing Polylines
618618

619619
You can remove a Polyline using the [GoogleMap](#googlemap-object)'s `removePolyline` function, like so:
620620

@@ -624,8 +624,8 @@ function removePolyline(map: GoogleMap, polyline: Polyline) {
624624
}
625625
```
626626

627-
### Ground Overlays
628-
##### Adding Ground Overlays
627+
## Ground Overlays
628+
### Adding Ground Overlays
629629

630630
You can create Ground Overlays using the [GoogleMap](#googlemap-object)'s object `addGroundOverlay` function by passing in the specified [GroundOverlay Options](#groundoverlayoptions).
631631

@@ -652,7 +652,7 @@ function addGroundOverlay(map: GoogleMap, groundOverlayOptions: GroundOverlayOpt
652652
`anchorU` | `number` |
653653
`anchorV` | `number` |
654654

655-
#### Removing Ground Overlays
655+
### Removing Ground Overlays
656656

657657
You can remove a GroundOverlay using the [GoogleMap](#googlemap-object)'s `removeGroundOverlay` function, like so:
658658

@@ -663,9 +663,8 @@ function removeGroundOverlay(map: GoogleMap, groundOverlay: GroundOverlay) {
663663
```
664664

665665

666-
667666
## Tile Overlays
668-
#### Adding Tile Overlays
667+
### Adding Tile Overlays
669668

670669
You can create Tile Overlays using the [GoogleMap](#googlemap-object)'s object `addTileOverlay` function by passing in the specified [TileOverlay Options](#tileoverlayoptions).
671670

@@ -687,7 +686,7 @@ function addTileOverlay(map: GoogleMap, tileOverlayOptions: TileOverlayOptions):
687686

688687
Setting tile overlay options after the tile overlay has been added to the map can have no effect on the tile overlay. To update the tile overlay, you may need to call `clearTileCache()`.
689688

690-
#### Removing Tile Overlays
689+
### Removing Tile Overlays
691690

692691
You can remove a TileOverlay using the [GoogleMap](#googlemap-object)'s `removeTileOverlay` function, like so:
693692

@@ -697,7 +696,7 @@ function removeTileOverlay(map: GoogleMap, tileOverlay: TileOverlay) {
697696
}
698697
```
699698

700-
#### Tile Providers
699+
## Tile Providers
701700

702701
Tile providers are objects that provide tiles to be used in a Tile Overlay.
703702

0 commit comments

Comments
 (0)
Please sign in to comment.