Skip to content

Commit bf1a5cd

Browse files
nativescript-ossnativescript-oss
committed
chore(update-plugins): Fri Mar 14 08:05:42 UTC 2025
1 parent 1943b31 commit bf1a5cd

File tree

1 file changed

+110
-117
lines changed

1 file changed

+110
-117
lines changed

‎content/plugins/google-maps.md

+110-117
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,6 @@ A plugin that allows you to use the [Maps SDK](https://developers.google.com/map
2121

2222
- [Use @nativescript/google-maps with Angular](#use-nativescriptgoogle-maps-with-angular)
2323
- [Use @nativescript/google-maps with Vue](#use-nativescriptgoogle-maps-with-vue)
24-
- [Control the camera](#control-the-camera)
25-
- [Set the map type](#set-the-map-type)
26-
- [Styling The Map](#styling-the-map)
2724

2825
- [API](#api)
2926

@@ -33,10 +30,14 @@ A plugin that allows you to use the [Maps SDK](https://developers.google.com/map
3330
- [GoogleMap Object](#googlemap-object)
3431
- [Properties](#properties)
3532
- [Methods](#methods)
36-
- [Camera Position](#camera-position)
37-
- [Projection](#projection)
38-
- [UISettings](#uisettings-interface)
39-
- [MapType enum](#maptype-enum)
33+
- [Control the camera](#control-the-camera)
34+
- [Camera Position](#camera-position)
35+
- [Projection](#projection)
36+
- [Map Customization](#map-customization)
37+
- [UISettings](#uisettings-interface)
38+
- [Setting the map type](#setting-the-map-type)
39+
- [MapType enum](#maptype-enum)
40+
- [Styling The Map](#styling-the-map)
4041
- [Markers](#markers)
4142
- [Adding Markers](#adding-markers)
4243
- [Marker Object](#marker-object)
@@ -192,17 +193,6 @@ import { GoogleMapsModule } from '@nativescript/google-maps/angular';
192193

193194
2. Add [MapView](#mapview-class) to your markup.
194195

195-
```html
196-
<MapView
197-
(mapTap)="onTap($event)"
198-
(mapLongPress)="onLongPress($event)"
199-
(markerTap)="onMarkerTap($event)"
200-
>
201-
</MapView>
202-
```
203-
204-
3. Manage
205-
206196
```html
207197
<MapView
208198
(ready)="onReady($event)"
@@ -262,79 +252,6 @@ To handle the map features, see the [GoogleMap object](#googlemap-object) API.
262252

263253
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.
264254

265-
### Control the camera
266-
267-
To programmatically update the camera position, call the `animateCamera()` method on the `GoogleMap` object and pass it a [CameraUpdate](#cameraupdate-class) instance.
268-
269-
```ts
270-
import { CameraUpdate } from '@nativescript/google-maps'
271-
272-
googleMap.animateCamera(
273-
CameraUpdate.fromCoordinate(
274-
{
275-
lat: -32.1234,
276-
lng: 125.1234,
277-
},
278-
googleMap.cameraPosition.zoom,
279-
),
280-
)
281-
```
282-
283-
### Set the map type
284-
285-
To set the map type, set the `mapType` property to one of the [MapType](#maptype-enum) options.
286-
287-
```ts
288-
import { GoogleMap, MapType } from '@nativescript/google-maps'
289-
290-
map: GoogleMap
291-
map.mapType = MapType.Hybrid
292-
```
293-
294-
See [CameraUpdate](#cameraupdate-class) for more methods you can call and pass to the `animateCamera()` method.
295-
296-
### Styling the map
297-
298-
You can style the map's items, such as roads, parks, businesses, and other points of interest.
299-
300-
Styling works only on the [normal](#maptype-enum) map type. Styling does not affect indoor maps.
301-
302-
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.
303-
304-
```json
305-
[
306-
{
307-
"featureType": "all",
308-
"stylers": [{ "color": "#C0C0C0" }]
309-
},
310-
{
311-
"featureType": "road.arterial",
312-
"elementType": "geometry",
313-
"stylers": [{ "color": "#CCFFFF" }]
314-
},
315-
{
316-
"featureType": "landscape",
317-
"elementType": "labels",
318-
"stylers": [{ "visibility": "off" }]
319-
}
320-
]
321-
```
322-
323-
To apply a custom style to your map you can set the `mapStyle` property on your `GoogleMap` object:
324-
325-
```ts
326-
import { GoogleMap } from '@nativescript/google-maps'
327-
328-
map: GoogleMap
329-
map.mapStyle = [
330-
{
331-
featureType: 'landscape',
332-
elementType: 'labels',
333-
stylers: [{ visibility: 'off' }],
334-
},
335-
]
336-
```
337-
338255
## API
339256

340257
### MapView Class
@@ -343,13 +260,14 @@ map.mapStyle = [
343260

344261
The following properties are available for adjusting the camera view on initialization:
345262

346-
| Property | Type | Description |
347-
| :-------- | :------- | :-------------------------------------------------------------------------------------------------------------- |
348-
| `lat` | `number` | Latitude, in degrees |
349-
| `lng` | `number` | Longitude, in degrees |
350-
| `zoom` | `number` | Zoom level (described [here](https://developers.google.com/maps/documentation/javascript/tutorial#zoom-levels)) |
351-
| `bearing` | `number` | Bearing, in degrees |
352-
| `tilt` | `number` | Tilt, in degrees |
263+
| Property | Type | Description |
264+
| :-------------------------------- | :-------- | :-------------------------------------------------------------------------------------------------------------- |
265+
| `lat` | `number` | Latitude, in degrees |
266+
| `lng` | `number` | Longitude, in degrees |
267+
| `zoom` | `number` | Zoom level (described [here](https://developers.google.com/maps/documentation/javascript/tutorial#zoom-levels)) |
268+
| `bearing` | `number` | Bearing, in degrees |
269+
| `tilt` | `number` | Tilt, in degrees |
270+
| `preventDefaultMarkerTapBehavior` | `boolean` | Prevents the default marker event handling (panning/info windows) done by Google Maps |
353271

354272
#### Events
355273

@@ -384,7 +302,7 @@ The following properties are available for adjusting the camera view on initiali
384302

385303
### GoogleMap Object
386304

387-
This class provides the mapping features and its instance is available from the [MapView](#mapview-class) instance's `ready` [event](#events):
305+
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.
388306

389307
```ts
390308
function onReady(event: MapReadyEvent) {
@@ -434,6 +352,26 @@ function onReady(event: MapReadyEvent) {
434352

435353
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)
436354

355+
## Control the camera
356+
357+
To programmatically update the camera position, call the `animateCamera()` method on the `GoogleMap` object and pass it a [CameraUpdate](#cameraupdate-class) instance.
358+
359+
```ts
360+
import { CameraUpdate } from '@nativescript/google-maps'
361+
362+
googleMap.animateCamera(
363+
CameraUpdate.fromCoordinate(
364+
{
365+
lat: -32.1234,
366+
lng: 125.1234,
367+
},
368+
googleMap.cameraPosition.zoom,
369+
),
370+
)
371+
```
372+
373+
See [CameraUpdate](#cameraupdate-class) for more methods you can call and pass to the `animateCamera()` method.
374+
437375
### Camera Position
438376

439377
The map's current camera position can be read from the `cameraPosition` property of a [GoogleMap](#googlemap-object) object.
@@ -472,6 +410,8 @@ A projection is used to translate between on screen location and geographic coor
472410
| `toScreenLocation(coordinate: Coordinate)` | Returns a screen location that corresponds to a geographical coordinate. |
473411
| `containsCoordinate(coordinate: Coordinate)` | Returns true if the coordinate is visible in the current viewport. |
474412

413+
## Map Customization
414+
475415
### UISettings Interface
476416

477417
You can adjust the maps UI settings from the `GoogleMap` object by configuring the following properties of the `uiSettings` property:
@@ -489,6 +429,17 @@ You can adjust the maps UI settings from the `GoogleMap` object by configuring t
489429
| `zoomControlsEnabled` | `boolean` | Whether map zoom controls are enabled or not |
490430
| `scrollGesturesEnabledDuringRotateOrZoom` | `boolean` | Whether scroll gestures are enabled while rotating or zooming |
491431

432+
### Setting the map type
433+
434+
To set the map type, set the `mapType` property to one of the [MapType](#maptype-enum) options.
435+
436+
```ts
437+
import { GoogleMap, MapType } from '@nativescript/google-maps'
438+
439+
map: GoogleMap
440+
map.mapType = MapType.Hybrid
441+
```
442+
492443
### MapType enum
493444

494445
The Google Maps API offers the following five types of maps:
@@ -501,9 +452,51 @@ The Google Maps API offers the following five types of maps:
501452
| `Terrain` | Topographic data. The map includes colors, contour lines and labels, and perspective shading. Some roads and labels are also visible. |
502453
| `Hybrid` | Satellite photograph data with road maps added. Road and feature labels are also visible. |
503454

504-
### Markers
455+
### Styling the map
456+
457+
You can style the map's items, such as roads, parks, businesses, and other points of interest.
458+
459+
Styling works only on the [normal](#maptype-enum) map type. Styling does not affect indoor maps.
460+
461+
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.
462+
463+
```json
464+
[
465+
{
466+
"featureType": "all",
467+
"stylers": [{ "color": "#C0C0C0" }]
468+
},
469+
{
470+
"featureType": "road.arterial",
471+
"elementType": "geometry",
472+
"stylers": [{ "color": "#CCFFFF" }]
473+
},
474+
{
475+
"featureType": "landscape",
476+
"elementType": "labels",
477+
"stylers": [{ "visibility": "off" }]
478+
}
479+
]
480+
```
481+
482+
To apply a custom style to your map you can set the `mapStyle` property on your `GoogleMap` object:
483+
484+
```ts
485+
import { GoogleMap } from '@nativescript/google-maps'
486+
487+
map: GoogleMap
488+
map.mapStyle = [
489+
{
490+
featureType: 'landscape',
491+
elementType: 'labels',
492+
stylers: [{ visibility: 'off' }],
493+
},
494+
]
495+
```
496+
497+
## Markers
505498

506-
#### Adding Markers
499+
### Adding Markers
507500

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

@@ -542,14 +535,14 @@ It implements the [MarkerOptions] interface and has the following additional met
542535
| `userData` | `any` | Additional information assigned to the marker |
543536
| `zIndex` | `number` | Z-index of the marker |
544537

545-
### Coordinate
538+
#### Coordinate
546539

547540
| Property | Type |
548541
| :------- | :------- |
549542
| `lat` | `number` |
550543
| `lng` | `number` |
551544

552-
#### Removing Markers
545+
### Removing Markers
553546

554547
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.
555548

@@ -559,7 +552,7 @@ function removeMarker(map: GoogleMap, marker: Marker) {
559552
}
560553
```
561554

562-
### Circles
555+
## Circles
563556

564557
### Adding Circles
565558

@@ -586,7 +579,7 @@ function addCircle(map: GoogleMap, circleOptions: CircleOptions): Circle {
586579
| `zIndex` | `number` |
587580
| `userData` | `{ [key: string]: any }` |
588581

589-
#### Removing Circles
582+
### Removing Circles
590583

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

@@ -596,9 +589,9 @@ function removeCircle(map: GoogleMap, circle: Circle) {
596589
}
597590
```
598591

599-
### Polygons
592+
## Polygons
600593

601-
#### Adding Polygons
594+
### Adding Polygons
602595

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

@@ -608,7 +601,7 @@ function addPolygon(map: GoogleMap, polygonOptions: PolygonOptions): Polygon {
608601
}
609602
```
610603

611-
### PolygonOptions
604+
#### PolygonOptions
612605

613606
| Property | Type |
614607
| :---------------- | :-------------------------------------- |
@@ -635,9 +628,9 @@ function removePolygon(map: GoogleMap, polygon: Polygon) {
635628
}
636629
```
637630

638-
### Polylines
631+
## Polylines
639632

640-
##### Adding Polylines
633+
### Adding Polylines
641634

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

@@ -667,7 +660,7 @@ function addPolyline(
667660
| `endCap` | Cap & Partial\<NativeObject\> |
668661
| `userData` | `{ [key: string]: any }` |
669662

670-
#### Removing Polylines
663+
### Removing Polylines
671664

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

@@ -677,9 +670,9 @@ function removePolyline(map: GoogleMap, polyline: Polyline) {
677670
}
678671
```
679672

680-
### Ground Overlays
673+
## Ground Overlays
681674

682-
##### Adding Ground Overlays
675+
### Adding Ground Overlays
683676

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

@@ -710,7 +703,7 @@ function addGroundOverlay(
710703
| `anchorU` | `number` |
711704
| `anchorV` | `number` |
712705

713-
#### Removing Ground Overlays
706+
### Removing Ground Overlays
714707

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

@@ -722,7 +715,7 @@ function removeGroundOverlay(map: GoogleMap, groundOverlay: GroundOverlay) {
722715

723716
## Tile Overlays
724717

725-
#### Adding Tile Overlays
718+
### Adding Tile Overlays
726719

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

@@ -748,7 +741,7 @@ function addTileOverlay(
748741

749742
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()`.
750743

751-
#### Removing Tile Overlays
744+
### Removing Tile Overlays
752745

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

@@ -758,7 +751,7 @@ function removeTileOverlay(map: GoogleMap, tileOverlay: TileOverlay) {
758751
}
759752
```
760753

761-
#### Tile Providers
754+
## Tile Providers
762755

763756
Tile providers are objects that provide tiles to be used in a Tile Overlay.
764757

0 commit comments

Comments
 (0)