Implement Vue components IMap(google map) with storybook

Archieced:

• vue-cli, storybook
• use google map api
• IMap component
• IMap storybook

Step by step:

• step1: create gcp (google cloud platform) project and active google map relative api
• step2: install project with vue-cli
• step3: init vue storybook
• step4: implement IMap component
• step5: implement IMap component story

source code

• https://github.com/sky790312/vue-google-map-with-storybook

step1: create gcp (google cloud platform) project and active google map relative api

use your google account, go to gcp and create the new project. Then active google map relative api.

• google cloud platform

Here need to active “Google Maps JavaScript API” , “Google Maps Geocoding API” , “Google Places API Web Service” to use IMap component.

step2: install project with vue-cli

yarn global add vue-cli
vue init [my-vue-app] 
...

• vue-cli

step3: init vue storybook

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

yarn global add @storybook/cli
cd [my-vue-app]
getstorybook

It will generate storybook relative setting and stories in your project.

vue storybook

step4: implement IMap component

Here we need to load its script and init google map in your project. you have two way to load the script:

1. load script in inde.html

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7vz8rdHAJoMRNfGC5ieJSvWkqevlRJDc&libraries=places"></script>

1. load script in js file

(function(d, s, id){
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement(s); js.id = id;
 js.async = true;
 js.defer = true;
 js.src = `https://maps.googleapis.com/maps/api/js?key=${api.googleApiKey}&libraries=places`
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'gmap'));

• easy to use IMap in App.vue like:

<template>
     <i-map
       :lat="-34.4"
       :lng="150.644">
     </i-map>
</template>
<script>
import IMap from './components/IMap'
export default {
 name: 'app',
 components: {
   IMap
 }
}
</script>

You can check the more detail in gogole map api document. It has a great document.
google map api doc

step5: implement IMap component story

add preview-head.html in .storybook folder and include the google map scirpt.
(Its what storybook embedded iframe the html)

• /.storybook/preview-head.html

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7vz8rdHAJoMRNfGC5ieJSvWkqevlRJDc&libraries=places"></script>

You can use more storybook addons by install it. But you have to install react first. check here:
https://github.com/storybooks/storybook/issues/1751

• add the IMap component story. There are fews sample to use vue in storybook. Just like writing vue. ex:

import { storiesOf } from '@storybook/vue';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import IMap from '../components/IMap.vue';
const lat = 23.90
const lng = 121.07
storiesOf('IMap', module)
  .add('with draggable marker', () => ({
    components: { IMap },
    template: `
      <div style="width: 800px;height: 600px;">
        <i-map
          :lat="${lat}"
          :lng="${lng}"
          :draggable="true">
        </i-map>
      </div>`
  }))

Final:

yarn run dev //check localhost:8080 
yarn run storybook // check localhost:6006

Here just using google map to be a sample component with storybook. The step and thinking step by step.
You should develop your vue component and showing the UI spec by storybook. Its a good habits to develop.

You can check it all in my github.
(https://github.com/sky790312/vue-google-map-with-storybook)

Thanks!