a simple component to generate an static google map

Last update: May 17, 2022

vue-static-map

a simple component to generate an static google map

static google map

Google Documentation

Demo

Requirements

  1. Vue 2.X.X

Usage

  1. Install from npm

    npm install vue-static-map
    

    Or include in your html using the script tag

    <script src="https://unpkg.com/vue-static-map/dist/StaticMap.umd.min.js"></script>
  2. Add component in your app

    import StaticMap from 'vue-static-map';
    // or require('vue-static-map')
    // or window.StaticMap if you are including in a script tag
    
    export default {
    	components: {
    		StaticMap,
    	},
    };
  3. Create some parameters in your data object

    export default {
    	data: {
    		apiKey: 'YOUR_GOOGLE_API_KEY', // required
    		zoom: 13, // required
    		center: 'Brooklyn+Bridge,New+York,NY',
    		format: 'gif',
    		language: 'ja',
    		markers: [
    			{
    				label: 'B',
    				color: 'blue',
    				lat: 40.702147,
    				lng: -74.015794,
    				size: 'normal',
    			},
    			{
    				label: 'Y',
    				color: 'yellow',
    				lat: 40.711614,
    				lng: -74.012318,
    				size: 'tiny',
    			},
    			{
    				label: 'G',
    				color: 'green',
    				lat: 40.718217,
    				lng: -74.015794,
    				size: 'small',
    				icon: 'http://www.airsoftmap.net/images/pin_map.png',
    			},
    		],
    		paths: [
    			{
    				color: 'blue',
    				weight: 8,
    				geodesic: false,
    				fillcolor: '0xFFFF0033',
    				locations: [
    					{ startLat: 40.737102, endLng: -73.990318 },
    					{ startLat: 40.749825, endLng: -73.987963 },
    					{ startLat: 40.752946, endLng: -73.987384 },
    					{ startLat: 40.762946, endLng: -73.997399 },
    				],
    			},
    		],
    		type: 'roadmap',
    		size: [800, 400],
    	},
    	components: {
    		StaticMap,
    	},
    };
  4. In your template just call the static map component

    <static-map :google-api-key="apiKey" :format="format" :markers="markers" :zoom="zoom" :center="center" :size="size" :type="type" :paths="paths" :language="language"></static-map>

Events

  1. What about if you want the URL of the map, you can easily do that using the getUrl event

    function getUrl(url) {
    	this.url = url;
    }
    
    export default {
    	data: () => {
    		const dataValues = {
    			apiKey: 'YOUR_API_KEY',
    			center: 'Empire State Building',
    			url: '',
    			zoom: 13,
    		};
    		return dataValues;
    	},
    	name: 'app',
    	components: {
    		StaticMap,
    	},
    	methods: {
    		getUrl,
    	},
    };
  2. Add the event on your template

    <static-map :google-api-key="apiKey" v-on:get-url="getUrl" :zoom="zoom" :center="center"></static-map>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run component

GitHub

https://github.com/eperedo/vue-static-map
Comments
  • 1. Support dynamic alt/title values.

    I'm submitting a ...

    • [ ] bug report
    • [x ] feature request
    • [ ] other (Please do not submit support requests here (see above))

    Current behavior: The alt tag is hard coded.

    Expected / new behavior: I should be able to specify an alt and title value for the image tag. For example, :title="Map of Foo"

    Reviewed by cfjedimaster at 2018-03-29 19:10
  • 2. Support alt and title tags

    What kind of change does this PR introduce? (Bug fix, feature, docs update, ...) Adds support for dynamic alt and title text.

    What is the current behavior? (You can also link to an open issue here) No support. :)

    What is the new behavior (if this is a feature change)? Adds support for alt/title.

    Does this PR introduce a breaking change? Not afaik.

    Please check if the PR fulfills these requirements

    • [x ] The commit message follows our guidelines: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been added / updated (for bug fixes / features)

    I will admit - no test or change to the readme. I can update the readme though - just let me know.

    Other information:

    Reviewed by cfjedimaster at 2018-03-29 19:28
  • 3. Not passing optional props breaks map

    I'm submitting a ...

    • [x ] bug report
    • [ ] feature request
    • [ ] other (Please do not submit support requests here (see above))

    Current behavior: When you don't pass optional params, such as paths, the URL generator inserts it as undefined, which can break features

    For example, here is a URL generated when I did not pass paths. https://maps.googleapis.com/maps/api/staticmap?center=26.39514,-80.08892&zoom=17&size=150x125&maptype=satellite&format=jpg&key=AIzaSyASPgHKMi6jZTcCvEibvZitZVhtj-Sl3O4&scale=1&language=en&markers=color:red|26.39514,-80.08892undefined

    As you can see the URL ends with undefined, which breaks the marker. Remove the undefined at the end, and the marker renders properly.

    Expected / new behavior: If an param is undefined, it should not be inserted into the URL as such

    Minimal reproduction of the problem with instructions: Create static map, don't pass paths

    Reviewed by ChavaSobreyra at 2018-02-05 16:46
  • 4. Setter named `getUrl`

    Hi,

    Just a remark on https://github.com/eperedo/vue-static-map/blob/1ed07bb4076386403ba6070cc0e77dc5369f50c6/src/App.vue#L18

    Shouldn't the method getUrl be nammed setUrl in case it assigns this.url ?

    Reviewed by fabdbt at 2019-02-08 09:50
  • 5. Style maps using Snazzy Maps style config JSON

    What kind of change does this PR introduce? (Bug fix, feature, docs update, ...) It's a new feature :)

    What is the current behavior? (You can also link to an open issue here) The plain old good Google Maps color schema maps that looks all the same.

    What is the new behavior (if this is a feature change)? Now we could have the possibility of show our maps with all the groovy styles, colors and customizations that Snazzy Maps allow to change/manage.

    Does this PR introduce a breaking change? Not that I know.

    Please check if the PR fulfills these requirements

    • [ ] The commit message follows our guidelines: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)

    Other information: Feel free to comment if you want any change or to reject the PR if it doesn't met your idea for the component.

    Reviewed by ala747 at 2018-11-16 23:17
Related tags
vue google map custom marker component
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

May 17, 2022
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Jun 25, 2022
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Feb 12, 2022
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

May 10, 2022
This component allows you to display custom HTML content on the map using Overlay
This component allows you to display custom HTML content on the map using Overlay

vue3-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an update (a fork) from e

Apr 1, 2022
Baidu Map components for Vue 2.x
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

Jul 1, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

Jun 21, 2022
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]
New Sayobot Map Downloader Written by Electron@12, Vite@2, Vue@3

SayoDownloader This software only provide in Chinese! 一个全新设计的小夜地图下载器

May 31, 2022
Web map Vue 3.x components with the power of OpenLayers
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Jun 24, 2022
A set of Vue.js components to display an interactive SVG map

vue-svg-map A set of Vue.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save vue-s

Jun 19, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

May 28, 2022
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js

This extension is under development, it may take breaking changes. SVG Map Picke

Jun 13, 2022
Kartobuilder - a php package for the laravel framework that works with the inertia jetstream stack to build your own map

Kartobuilder is a php package for the laravel framework that works with the inertia jetstream stack to build your own map.

May 3, 2022
🗺 Map Module for Nuxt 3

@nuxtjs/map Map module for Nuxt ✨ Release Notes ?? Read the documentation Features Nuxt 3 ready Easy integration with Google Maps & Leaflet Use only t

May 1, 2022
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes

Kirby Mapnotator Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes. Overview This plugin is completely free and publish

Jun 5, 2022
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

Jul 3, 2022
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

May 25, 2022
A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

Jun 30, 2022
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Apr 11, 2022