Skip to content

Commit c3a58af

Browse files
OS-pedrogustavobilroOS-pedrogustavobilro
authored
docs: update google maps
1 parent 4a61d6c commit c3a58af

File tree

1 file changed

+112
-23
lines changed

1 file changed

+112
-23
lines changed

‎docs/apis/google-maps.md‎

Lines changed: 112 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,6 @@ The Google Maps SDK supports the use of showing the users current location via `
2929

3030
Read about [Configuring `Info.plist`](https://capacitorjs.com/docs/ios/configuration#configuring-infoplist) in the [iOS Guide](https://capacitorjs.com/docs/ios) for more information on setting iOS permissions in Xcode.
3131

32-
### Minimum Deployment Target
33-
34-
Version 6 of this plugin has a minimum deployment target of iOS 14.0. You will need to edit `ios/App/Podfile` and change the following line from 13.0 to 14.0:
35-
```
36-
platform :ios, '14.0'
37-
```
38-
39-
Additionally, you will need to open your project in XCode and in the `Build Settings` tab for your `Project` and for each `Target` set the `iOS Deployment Target` to `iOS 14.0` or higher.
40-
4132
### Typescript Configuration
4233

4334
Your project will also need have `skipLibCheck` set to `true` in `tsconfig.json`.
@@ -262,6 +253,57 @@ const MyMap: React.FC = () => {
262253
export default MyMap;
263254
```
264255

256+
### Vue
257+
258+
```vue
259+
<script lang="ts" setup>
260+
import { ref, shallowRef, useTemplateRef } from 'vue'
261+
import { GoogleMap } from '@capacitor/google-maps'
262+
263+
const mapRef = useTemplateRef<HTMLElement>('mapRef')
264+
const newMap = shallowRef<GoogleMap>()
265+
266+
async function createMap() {
267+
if (!mapRef.value) return
268+
269+
newMap.value = await GoogleMap.create({
270+
id: 'my-cool-map',
271+
element: mapRef.value,
272+
apiKey: import.meta.env.VITE_YOUR_API_KEY_HERE,
273+
config: {
274+
center: {
275+
lat: 33.6,
276+
lng: -117.9,
277+
},
278+
zoom: 8,
279+
},
280+
})
281+
}
282+
</script>
283+
284+
<template>
285+
<capacitor-google-map
286+
ref="mapRef"
287+
style="display: inline-block; width: 275px; height: 400px"
288+
></capacitor-google-map>
289+
<button @click="createMap()">Create Map</button>
290+
</template>
291+
292+
```
293+
294+
make sure you need enable [recognize native custom elements](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) like
295+
296+
```ts
297+
// vite.config.mts > plugins
298+
Vue({
299+
template: {
300+
compilerOptions: {
301+
isCustomElement: (tag) => tag.startsWith('capacitor-')
302+
},
303+
},
304+
}),
305+
```
306+
265307
### Javascript
266308

267309
```html
@@ -308,6 +350,8 @@ export default MyMap;
308350
* [`disableTouch()`](#disabletouch)
309351
* [`enableClustering(...)`](#enableclustering)
310352
* [`disableClustering()`](#disableclustering)
353+
* [`addTileOverlay(...)`](#addtileoverlay)
354+
* [`removeTileOverlay(...)`](#removetileoverlay)
311355
* [`addMarker(...)`](#addmarker)
312356
* [`addMarkers(...)`](#addmarkers)
313357
* [`removeMarker(...)`](#removemarker)
@@ -410,6 +454,34 @@ disableClustering() => Promise<void>
410454
--------------------
411455

412456

457+
### addTileOverlay(...)
458+
459+
```typescript
460+
addTileOverlay(tileOverlay: TileOverlay) => Promise<{ id: string; }>
461+
```
462+
463+
| Param | Type |
464+
| ----------------- | --------------------------------------------------- |
465+
| **`tileOverlay`** | <code><a href="#tileoverlay">TileOverlay</a></code> |
466+
467+
**Returns:** <code>Promise&lt;{ id: string; }&gt;</code>
468+
469+
--------------------
470+
471+
472+
### removeTileOverlay(...)
473+
474+
```typescript
475+
removeTileOverlay(id: string) => Promise<void>
476+
```
477+
478+
| Param | Type |
479+
| -------- | ------------------- |
480+
| **`id`** | <code>string</code> |
481+
482+
--------------------
483+
484+
413485
### addMarker(...)
414486

415487
```typescript
@@ -924,20 +996,25 @@ For web, all the javascript Google Maps options are available as
924996
GoogleMapConfig extends google.maps.MapOptions.
925997
For iOS and Android only the config options declared on <a href="#googlemapconfig">GoogleMapConfig</a> are available.
926998

927-
| Prop | Type | Description | Default | Since |
928-
| ---------------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----- |
929-
| **`width`** | <code>number</code> | Override width for native map. | | |
930-
| **`height`** | <code>number</code> | Override height for native map. | | |
931-
| **`x`** | <code>number</code> | Override absolute x coordinate position for native map. | | |
932-
| **`y`** | <code>number</code> | Override absolute y coordinate position for native map. | | |
933-
| **`center`** | <code><a href="#latlng">LatLng</a></code> | Default location on the Earth towards which the camera points. | | |
934-
| **`zoom`** | <code>number</code> | Sets the zoom of the map. | | |
935-
| **`androidLiteMode`** | <code>boolean</code> | Enables image-based lite mode on Android. | <code>false</code> | |
936-
| **`devicePixelRatio`** | <code>number</code> | Override pixel ratio for native map. | | |
937-
| **`styles`** | <code>MapTypeStyle[] \| null</code> | Styles to apply to each of the default map types. Note that for satellite, hybrid and terrain modes, these styles will only apply to labels and geometry. | | 4.3.0 |
938-
| **`mapId`** | <code>string</code> | A map id associated with a specific map style or feature. [Use Map IDs](https://developers.google.com/maps/documentation/get-map-id) Only for Web. | | 5.4.0 |
939-
| **`androidMapId`** | <code>string</code> | A map id associated with a specific map style or feature. [Use Map IDs](https://developers.google.com/maps/documentation/get-map-id) Only for Android. | | 5.4.0 |
940-
| **`iOSMapId`** | <code>string</code> | A map id associated with a specific map style or feature. [Use Map IDs](https://developers.google.com/maps/documentation/get-map-id) Only for iOS. | | 5.4.0 |
999+
| Prop | Type | Description | Default | Since |
1000+
| ---------------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----- |
1001+
| **`width`** | <code>number</code> | Override width for native map. | | |
1002+
| **`height`** | <code>number</code> | Override height for native map. | | |
1003+
| **`x`** | <code>number</code> | Override absolute x coordinate position for native map. | | |
1004+
| **`y`** | <code>number</code> | Override absolute y coordinate position for native map. | | |
1005+
| **`center`** | <code><a href="#latlng">LatLng</a></code> | Default location on the Earth towards which the camera points. | | |
1006+
| **`zoom`** | <code>number</code> | Sets the zoom of the map. | | |
1007+
| **`androidLiteMode`** | <code>boolean</code> | Enables image-based lite mode on Android. | <code>false</code> | |
1008+
| **`devicePixelRatio`** | <code>number</code> | Override pixel ratio for native map. | | |
1009+
| **`styles`** | <code>MapTypeStyle[] \| null</code> | Styles to apply to each of the default map types. Note that for satellite, hybrid and terrain modes, these styles will only apply to labels and geometry. | | 4.3.0 |
1010+
| **`mapId`** | <code>string</code> | A map id associated with a specific map style or feature. [Use Map IDs](https://developers.google.com/maps/documentation/get-map-id) Only for Web. | | 5.4.0 |
1011+
| **`androidMapId`** | <code>string</code> | A map id associated with a specific map style or feature. [Use Map IDs](https://developers.google.com/maps/documentation/get-map-id) Only for Android. | | 5.4.0 |
1012+
| **`iOSMapId`** | <code>string</code> | A map id associated with a specific map style or feature. [Use Map IDs](https://developers.google.com/maps/documentation/get-map-id) Only for iOS. | | 5.4.0 |
1013+
| **`maxZoom`** | <code>number \| null</code> | The maximum zoom level which will be displayed on the map. If omitted, or set to &lt;code&gt;null&lt;/code&gt;, the maximum zoom from the current map type is used instead. Valid zoom values are numbers from zero up to the supported &lt;a href="https://developers.google.com/maps/documentation/javascript/maxzoom"&gt;maximum zoom level&lt;/a&gt;. | | |
1014+
| **`minZoom`** | <code>number \| null</code> | The minimum zoom level which will be displayed on the map. If omitted, or set to &lt;code&gt;null&lt;/code&gt;, the minimum zoom from the current map type is used instead. Valid zoom values are numbers from zero up to the supported &lt;a href="https://developers.google.com/maps/documentation/javascript/maxzoom"&gt;maximum zoom level&lt;/a&gt;. | | |
1015+
| **`mapTypeId`** | <code>string \| null</code> | The initial Map mapTypeId. Defaults to &lt;code&gt;ROADMAP&lt;/code&gt;. | | |
1016+
| **`heading`** | <code>number \| null</code> | The heading for aerial imagery in degrees measured clockwise from cardinal direction North. Headings are snapped to the nearest available angle for which imagery is available. | | |
1017+
| **`restriction`** | <code>MapRestriction \| null</code> | Defines a boundary that restricts the area of the map accessible to users. When set, a user can only pan and zoom while the camera view stays inside the limits of the boundary. | | |
9411018

9421019

9431020
#### LatLng
@@ -957,6 +1034,18 @@ An interface representing a pair of latitude and longitude coordinates.
9571034
| **`mapId`** | <code>string</code> |
9581035

9591036

1037+
#### TileOverlay
1038+
1039+
A tile overlay is an image placed on top of your map at a specific zoom level. Available on iOS, Android and Web
1040+
1041+
| Prop | Type | Description | Default |
1042+
| ------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
1043+
| **`url`** | <code>string</code> | A string representing the tile url. Should contain `{x}`, `{y}` and `{z}` so they can be replaced with actual values for x, y and zoom. Available on iOS, Android and Web | |
1044+
| **`opacity`** | <code>number</code> | The opacity of the tile overlay, between 0 (completely transparent) and 1 inclusive. Available on iOS, Android and Web | <code>undefined</code> |
1045+
| **`visible`** | <code>boolean</code> | Controls whether this tile overlay should be visible. Available only on Android | <code>undefined</code> |
1046+
| **`zIndex`** | <code>number</code> | The zIndex of the tile overlay. Available on iOS and Android | <code>undefined</code> |
1047+
1048+
9601049
#### Marker
9611050

9621051
A marker is an icon placed at a particular point on the map's surface.

0 commit comments

Comments
 (0)