### Full HTML Example with Multiple Markers Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/info-window.md A complete HTML example demonstrating how to use a single Info Window with multiple markers, including Vue.js setup and gmap-vue initialization. ```html
A basic example of using a single infowindow for 3 markers.
``` -------------------------------- ### Install GmapVue Plugin Example Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-3-version/api/02-gmap-vue-plugin.md Example of how to install the GmapVue plugin in your Vue 3 application's main entry file. Ensure your Google Maps API key is configured in environment variables. ```typescript import { createGmapVuePlugin } from "@gmap-vue/v3"; import "@gmap-vue/v3/dist/style.css"; import { createApp } from "vue"; import App from "./App.vue"; createApp(App) .use( createGmapVuePlugin({ load: { key: import.meta.env.VITE_GOOGLE_MAPS_API_KEY, libraries: "places", }, }), ) .mount("#app"); ``` -------------------------------- ### HTML Example with Interactive Street View Panorama Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/street-view-panorama.md A full HTML example demonstrating the Street View Panorama component with interactive controls for heading, pitch, and changing the panorama. It includes necessary CSS and JavaScript setup for Vue and Gmap-Vue. ```html

Panorama at Pembroke College, Cambridge, facing North, looking slightly upwards (10 degrees)

Point-of-view updates when you pan around



``` -------------------------------- ### Basic HTML Example for Place Input Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/place-input.md This example shows a basic HTML setup for the gmap-place-input component. It includes buttons to change the default place and displays the latitude and longitude of the selected place. ```html

Changing Default Place updates text box





{{latLng.lat}}, {{latLng.lng}}
``` -------------------------------- ### Vue 3 Quick Start Setup Source: https://github.com/diegoazh/gmap-vue/blob/master/README.md Integrate the GmapVue plugin into your Vue 3 application. Ensure your Google Maps API key is loaded from environment variables. ```typescript import { createApp } from 'vue'; import { createGmapVuePlugin } from '@gmap-vue/v3'; import '@gmap-vue/v3/dist/style.css'; import App from './App.vue'; createApp(App) .use( createGmapVuePlugin({ load: { key: import.meta.env.VITE_GOOGLE_MAPS_API_KEY, }, }), ) .mount('#app'); ``` -------------------------------- ### Basic Marker HTML Example with gmap-vue Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/marker.md An HTML example demonstrating the basic setup and usage of gmap-vue components, including Map and Marker, within a Vue 2 application. It shows how to install the plugin and register components. ```html
``` -------------------------------- ### Basic GmapMap Component Usage Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/map.md A minimal example demonstrating the basic setup of the `gmap-map` component with center and zoom properties. ```vue ``` -------------------------------- ### Install Marker Clusterer Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/cluster.md Install the necessary package for marker clustering. ```bash npm install --save @googlemaps/markerclusterer ``` -------------------------------- ### Map Functions Example Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/map.md Provides an example of using various functions available with the map component. ```html ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/diegoazh/gmap-vue/blob/master/README.md Install all project dependencies using pnpm for monorepo development. ```bash pnpm install ``` -------------------------------- ### Vue 3 Main Application Setup Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-3-version/index.mdx Set up the GmapVue plugin in your Vue 3 application's main entry point. Ensure your Google Maps API key is securely loaded, for example, via environment variables. ```typescript import { createGmapVuePlugin } from "@gmap-vue/v3"; import "@gmap-vue/v3/dist/style.css"; import { createApp } from "vue"; import App from "./App.vue"; const app = createApp(App); app.use( createGmapVuePlugin({ load: { key: import.meta.env.VITE_GOOGLE_MAPS_API_KEY, }, }), ); app.mount("#app"); ``` -------------------------------- ### Fit Bounds Example Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/map.md This example demonstrates how to fit the map to a set of bounds using the `fitBounds` method. It requires a reference to the map component. ```javascript fitBounds() { var b = new google.maps.LatLngBounds(); b.extend({ lat: 33.972, lng: 35.4054 }); b.extend({ lat: 33.7606, lng: 35.64592 }); this.$refs.mmm.fitBounds(b); } ``` -------------------------------- ### Map Destruction Example Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/map.md Shows an example of how to destroy the map component. ```html ``` -------------------------------- ### HTML Example of Map Functions Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/map.md This example demonstrates using buttons to trigger map functions like 'Pan To', 'Pan To Bounds', and 'Fit Bounds'. It also shows how to add markers to the map and handle click events on them. ```html
``` -------------------------------- ### Footer Example: Closing Issue Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/developers/README.md Example of how to use the footer to close an issue. ```sh close: #45 ``` -------------------------------- ### HTML Example with Interactive Polyline Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/polyline.md A comprehensive HTML example demonstrating a polyline with features like autocomplete for setting the center, editable path, and GeoJSON input/output. Includes necessary script includes for Vue, lodash, and gmap-vue. ```html
{{errorMessage}}
``` -------------------------------- ### HTML Example with Static Map Center Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/map.md Displays a Google Map with a predefined center and zoom level. This example is useful for static map displays where user interaction for centering is not required. ```html

Test 1

Passes if: You can pan around this map without it being snapped back to the center

Test 2

Passes if: Clicking the button changes the center
 

Test 3

Passes if: Resize of (1) is artefact-free.
Passes if: Resize of (2) preserves the center


1
2 ``` -------------------------------- ### Simple Autocomplete HTML Example Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/autocomplete.md Shows a simple HTML example of the Autocomplete component, likely for basic testing or demonstration purposes. This requires the eg-basic-autocomplete component to be defined. ```html ``` -------------------------------- ### Conventional Commit Footer Examples Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-3-version/developers/README.md Examples of how to format the footer section of a commit message to reference issues or indicate breaking changes. ```sh issue: #45 ``` ```sh close: #45 ``` ```sh resolve: #45 ``` ```sh BREAKING CHANGE: This breaks the api that generate automatically all components. ``` -------------------------------- ### Basic HTML Example with Autocomplete and Place Updates Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/old-documentation/docs/guide/autocomplete.md This example demonstrates basic usage of gmap-autocomplete, including setting default values and updating coordinates based on user selection. It also shows how to use the 'select-first-on-enter' option. ```html

Changing Default Place updates text box

  1. select a place
  2. click in place input
  3. select one option of the list
  4. press ⏎
    


Use a place input to see coordinates

lat: {{ latLng.lat }}, lng: {{ latLng.lng }}

Options work

You cannot find the state of Texas in this

Use a place input to see coordinates

lat: {{ latLng2.lat }}, lng: {{ latLng2.lng }}
``` -------------------------------- ### Serve Documentation Locally (Repository Root) Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/README.md Command to serve the GmapVue documentation site locally from the repository root. ```bash pnpm run serve:docs ``` -------------------------------- ### Serve Documentation Locally (Package Directory) Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/README.md Command to serve the GmapVue documentation site locally after navigating to the documentation package directory. ```bash cd packages/documentation pnpm run start ``` -------------------------------- ### HTML Example with Destroy and Resize Bus Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/map.md Demonstrates toggling map visibility and using a resize bus for map resizing. It shows how to manage map display with v-if and emit resize events using both the default and a custom resize bus. ```html

Resize Bus

There should be no error toggling the visibility of the maps

``` -------------------------------- ### Drawing Manager with Toolbar Example Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-2-version/guide/drawing-manager.md This example demonstrates how to integrate a custom toolbar with the GmapDrawingManager component to control drawing modes and actions. It includes setup for Vue, gmap-vue, and event handling for drawing mode changes and saving. ```html ``` ```javascript const toolbarTemplate = '
' + "
" + "
" + "
" + "
" + "
" + "
" + "
"; Vue.use(GmapVue, { load: { key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc', libraries: 'places,drawing' } }); document.addEventListener('DOMContentLoaded', function() { new Vue({ el: '#root', components: { drawingToolbar: { template: toolbarTemplate } }, data: { mapCenter: { lat: 4.5, lng: 99 }, mapMode: null, mapDraggable: true, mapCursor: null, shapes: [], rectangleOptions: { fillColor: '#777', fillOpacity: 0.4, strokeWeight: 2, strokeColor: '#999', draggable: false, editable: false, clickable: true }, circleOptions: { fillColor: '#777', fillOpacity: 0.4, strokeWeight: 2, strokeColor: '#999', draggable: false, editable: false, clickable: true }, polylineOptions: { fillColor: '#777', fillOpacity: 0.4, strokeWeight: 2, strokeColor: '#999', draggable: false, editable: false, clickable: true }, polygonOptions: { fillColor: '#777', fillOpacity: 0.4, strokeWeight: 2, strokeColor: '#999', draggable: false, editable: false, clickable: true } }, watch: { mapMode(newMode, oldMode) { if (newMode === 'ready') { if (oldMode === 'edit') { this.mapDraggable = true; this.mapCursor = null; return; } } if (newMode === 'edit') { this.mapDraggable = false; this.mapCursor = 'default'; } } }, mounted() { this.mapMode = 'ready'; } }); }); ``` -------------------------------- ### Data Flow Overview Source: https://github.com/diegoazh/gmap-vue/blob/master/openspec/changes/vue3-next-level-modernization/design.md Illustrates the sequence of operations from plugin installation to component resolution and verification. ```text app.use(createGmapVuePlugin(options)) -> normalize finalOptions -> create/provide app-scoped options + promise lazy -> loader initializes or detects Google Maps API -> components/composables resolve keyed promises -> docs and smoke tests verify published import paths ``` -------------------------------- ### Build and Deploy Documentation Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/README.md Commands used by the GitHub Actions workflow to build and prepare the documentation for deployment. ```bash pnpm run --filter docs typecheck pnpm run --filter docs build ``` -------------------------------- ### Map Initialization and Setup Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-3-version/api/components/map.md Initializes the Google Maps instance on component mount, handling map options, recycling existing instances, and binding properties and events. ```javascript onMounted(() => { useGoogleMapsApiPromiseLazy() .then(async () => { if (!gmvMap.value) { throw new Error(`we can find the template ref: 'gmvMap' `); } const mapLayerOptions: Partial = { ...getPropsValuesWithoutOptionsProp(props), ...props.options, }; const recycleKey = getRecycleKey(); let mapInstance: google.maps.Map | undefined; if (window[recycleKey]) { gmvMap.value.appendChild(window[recycleKey].div); mapInstance = window[recycleKey].map as google.maps.Map; mapInstance.setOptions(mapLayerOptions); } else { const { Map } = (await google.maps.importLibrary( 'maps', )) as google.maps.MapsLibrary; mapInstance = new Map(gmvMap.value, mapLayerOptions); window[recycleKey] = { map: mapInstance }; } onMountedResizeBusHook(props, resizePreserveCenter); const mapLayerPropsConfig = getComponentPropsConfig('GmvMap'); const mapLayerEventsConfig = getComponentEventsConfig('GmvMap', 'auto'); // binding properties (two and one way) bindPropsWithGoogleMapsSettersAndGettersOnSetup( mapLayerPropsConfig, mapInstance, emits as any, props, ); // Auto bind all events by default bindGoogleMapsEventsToVueEventsOnSetup( mapLayerEventsConfig, mapInstance, emits as any, excludedEvents, ); // manually trigger center and zoom twoWayBindingWrapper( ( increment: () => void, decrement: () => void, shouldUpdate: () => boolean, ) => { mapInstance?.addListener('center_changed', () => { if (shouldUpdate()) { /** * This event is fired when the map center property changes. It sends the position displayed at the center of the map. If the center or bounds have not been set then the result is undefined. (types: `LatLng|undefined`) * * @event center_changed * @type {(LatLng|undefined)} */ emits('center_changed', mapInstance?.getCenter()); } decrement(); }); const updateCenter = () => { increment(); mapInstance?.setCenter(finalLatLng.value); }; watchPrimitivePropertiesOnSetup( ['finalLat', 'finalLng'], updateCenter, { finalLat, finalLng }, ); }, ); mapInstance?.addListener('zoom_changed', () => { /** ``` -------------------------------- ### useAutocompletePromise Example Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-3-version/api/04-composables.md Demonstrates how to use `useAutocompletePromise` to get the `google.maps.places.Autocomplete` instance for a `GmvAutocomplete` component. This is useful for interacting with the autocomplete instance, such as reading its bounds. ```vue ``` -------------------------------- ### Type Check and Build Documentation Source: https://github.com/diegoazh/gmap-vue/blob/master/openspec/changes/vue3-next-level-modernization/apply-progress.md Run type checking and build processes for the documentation. ```shell $ pnpm run --filter docs typecheck passed $ pnpm run --filter docs build passed after adding a temporary pnpm `webpackbar: 7.0.0` override for the Docusaurus 3.9.0 / webpack 5.106+ ProgressPlugin compatibility issue. ``` -------------------------------- ### Street View Panorama Promise Example Source: https://github.com/diegoazh/gmap-vue/blob/master/packages/documentation/docs/vue-3-version/api/04-composables.md Demonstrates how to use `useStreetViewPanoramaPromise` to get the underlying `google.maps.StreetViewPanorama` instance for a `GmvStreetViewPanorama` component. It shows how to retrieve and log the current point of view (POV). ```vue ```