vue-static-map
a simple component to generate an static google map
Demo
Requirements
- Vue 2.X.X
Usage
-
Install from npm
npm install vue-static-map
Or include in your html using the script tag
-
Add component in your app
;// or require('vue-static-map')// or window.StaticMap if you are including in a script tagcomponents:StaticMap; -
Create some parameters in your data object
data:apiKey: 'YOUR_GOOGLE_API_KEY' // requiredzoom: 13 // requiredcenter: 'Brooklyn+Bridge,New+York,NY'format: 'gif'language: 'ja'markers:label: 'B'color: 'blue'lat: 40702147lng: -74015794size: 'normal'label: 'Y'color: 'yellow'lat: 40711614lng: -74012318size: 'tiny'label: 'G'color: 'green'lat: 40718217lng: -74015794size: 'small'icon: 'http://www.airsoftmap.net/images/pin_map.png'paths:color: 'blue'weight: 8geodesic: falsefillcolor: '0xFFFF0033'locations:startLat: 40737102 endLng: -73990318startLat: 40749825 endLng: -73987963startLat: 40752946 endLng: -73987384startLat: 40762946 endLng: -73997399type: 'roadmap'size: 800 400components:StaticMap; -
In your template just call the static map component
Events
-
What about if you want the URL of the map, you can easily do that using the getUrl event
{thisurl = url;}{const dataValues =apiKey: 'YOUR_API_KEY'center: 'Empire State Building'url: ''zoom: 13;return dataValues;}name: 'app'components:StaticMapmethods:getUrl; -
Add the event on your template
Build Setup
# install dependencies npm install # serve with hot reload at localhost:8080 npm run serve # build for production with minification npm run component