Vue Bootstrap Google Maps

Vue Google Maps - Bootstrap 4 & Material Design

As of July 16, 2018, an API Key is required to obtain Google Maps feature. Click here to get an API Key

Vue Bootstrap map is a component which displays a map of an area defined by a user. Maps can be used in components like forms and modals.

They are mostly used on contact and about pages to increase awareness of your location.

It's quite easy to implement Google map in your project since all it requires is the component.

Examples of Vue Bootstrap Google Maps use:

  • Traveling blog with map of every journey
  • Contact page
  • About section with your location

See the following Vue Bootstrap Google maps examples:


Basic Example



          <mdb-google-map
            name="reg"
            class="col-md-12"
            style=" height: 500px"
            :zoom="14"
            :markerCoordinates="[{
              latitude: 40.725118,
              longitude: -73.997699,
              title: 'New York'
            }]">
          </mdb-google-map>

          

              import { mdbGoogleMap } from 'mdbvue';
              export default {
                name:'mdbGoogleMapsPage',
                components: {
                  mdbGoogleMap
                }
              };
          

Custom map


            <mdb-google-map
              name="custom"
              class="col-md-12"
              style=" height: 500px"
              :zoom="14"
              :styles="styles"
              :markerCoordinates="[{
                latitude: 40.725118,
                longitude: -73.997699,
                title: 'New York'
              }]">
            </mdb-google-map>

        

            import { mdbmdbGoogleMap } from 'mdbvue';
            export default {
              name:'mdbGoogleMapsPage',
              components: {
                mdbGoogleMap
              },
              data() {
                return {
                  styles: [
                  {
                    "featureType": "administrative",
                    "elementType": "all",
                    "stylers": [{
                      "visibility": "off"
                    }]
                  }, {
                    "featureType": "poi",
                    "elementType": "all",
                    "stylers": [{
                      "visibility": "simplified"
                    }]
                  }, {
                    "featureType": "road",
                    "elementType": "all",
                    "stylers": [{
                      "visibility": "simplified"
                    }]
                  }, {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": [{
                      "visibility": "simplified"
                    }]
                  }, {
                    "featureType": "transit",
                    "elementType": "all",
                    "stylers": [{
                      "visibility": "simplified"
                    }]
                  }, {
                    "featureType": "landscape",
                    "elementType": "all",
                    "stylers": [{
                      "visibility": "simplified"
                    }]
                  }, {
                    "featureType": "road.highway",
                    "elementType": "all",
                    "stylers": [{
                      "visibility": "off"
                    }]
                  }, {
                    "featureType": "road.local",
                    "elementType": "all",
                    "stylers": [{
                      "visibility": "on"
                    }]
                  }, {
                    "featureType": "road.highway",
                    "elementType": "geometry",
                    "stylers": [{
                      "visibility": "on"
                    }]
                  }, {
                    "featureType": "road.arterial",
                    "elementType": "all",
                    "stylers": [{
                      "visibility": "off"
                    }]
                  }, {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": [{
                      "color": "#5f94ff"
                    },
                    {
                      "lightness": 26
                    },
                    {
                      "gamma": 5.86
                    }
                    ]
                  }, {
                    "featureType": "road.highway",
                    "elementType": "all",
                    "stylers": [{
                      "weight": 0.6
                    },
                    {
                      "saturation": -85
                    },
                    {
                      "lightness": 61
                    }
                    ]
                  }, {
                    "featureType": "landscape",
                    "elementType": "all",
                    "stylers": [{
                      "hue": "#0066ff"
                    },
                    {
                      "saturation": 74
                    },
                    {
                      "lightness": 100
                    }
                    ]
                  }
                ],
              };
            }
          };
          

Dynamically adding markers on the map


              <mdb-google-map
                name="reg"
                class="col-md-12"
                :markerCoordinates="coordinates"
                style=" height: 500px"
                :zoom="14">
              </mdb-google-map>

          


              import { mdbGoogleMap } from 'mdbvue';
              export default {
                name:'GoogleMapsPage',
                components: {
                  mdbGoogleMap
                },
                data() {
                  return {
                    coordinates: [{
                      latitude: 40.725118,
                      longitude: -73.997699,
                      title: 'New York'
                    }]
                  }
                }
              };



          

Map types

The component takes in string type prop, determining what kind of map is needed. By default, its value is roadmap, others are satellite, hybrid, terrain.


                  <mdb-google-map
                  name="satellite-example"
                  class="col-md-12"
                  :markerCoordinates="coordinatesSat"
                  style=" height: 500px"
                  :zoom="16"
                  type="satellite">
                </mdb-google-map>

              


                  import { mdbGoogleMap } from 'mdbvue';
                  export default {
                    name:'GoogleMapsPage',
                    components: {
                      mdbGoogleMap
                    },
                    data() {
                      return {
                        coordinatesSat: [{
                          latitude: 48.856847,
                          longitude: 2.296832,
                          title: "Paris, France"
                        }],
                      }
                    }
                  };
              

Vue Google Maps - API

In this section you will find informations about required modules and available inputs of forms component.


Props

Name Type Default Description
name String 'default' Name is used for map intitiation. As name prop value is used to generate instance's id, they should be unique on one page.
markerCoordinates Array false Each object within has three properties making up a marker: latitude, longitude and a marker's title
zoom Number 14 Zoom level, where minimum is 0 and it means a camera entirely zoomed out, and maximum is determined by the place observed. Remote regions in Antarctica go as far as 12, while much of the U.S. and Europe goes up to 21
modal Boolean false Used to bind a map's rerendering method while it is being shown in a modal
styles Array -- Feed component instances your favorite map styles
type String 'roadmap' Define the map's type - available values are 'roadmap', 'satellite', 'hybrid' and 'terain'
wrapperClass Array, String or Object -- Helps to style the component using classes
wrapperStyle Array, String or Object -- Helps to style the component using inline or object styles.

Full page map

Click the button below to see full page Google map live preview.


                <mdb-google-map
                  name="full"
                  class="col-md-12"
                  :markerCoordinates="coordinatesSat"
                  :zoom="16"
                  :wrapperStyle="{width: '100vw', height: '100vh'}"
                  type="satellite">
                </mdb-google-map>

            


                import { mdbGoogleMap } from 'mdbvue';
                export default {
                  name:'mdbGoogleMapsPage',
                  components: {
                    mdbGoogleMap
                  },
                  data() {
                    return {
                      coordinatesSat: [{
                        latitude: 48.856847,
                        longitude: 2.296832,
                        title: "Paris, France"
                      }],
                    }
                  }
                };
            

Map within a card

Regular map
Custom map

                    <mdb-row>
                        <mdb-column md="6" mb="4">
                          <mdb-card narrow>
                            <mdb-view cascade gradient="blue">
                              Regular map
                            </mdb-view>
                            <mdb-card-body cascade>
                              <mdb-google-map
                                name="card"
                                class="col-md-12"
                                :markerCoordinates="coordinates"
                                :zoom="14"
                                :wrapperStyle="{ height: '300px'}">
                              </mdb-google-map>
                            </mdb-card-body>
                          </mdb-card>
                        </mdb-column>
                        <mdb-column md="6" mb="4">
                          <mdb-card narrow>
                            <mdb-view cascade gradient="peach">
                              Custom map
                            </mdb-view>
                            <mdb-card-body cascade>
                              <mdb-google-map
                                    name="card2"
                                    class="col-md-12"
                                    :markerCoordinates="coordinates"
                                    :zoom="14"
                                    :styles="styles"
                                    :wrapperStyle="{ height: '300px'}">
                              </mdb-google-map>
                            </mdb-card-body>
                          </mdb-card>
                        </mdb-column>
                      </mdb-row>

                    


                        import { mdbGoogleMap, mdbRow, mdbColumn, mdbCard, mdbView, mdbGoogleMap } from 'mdbvue';
                        export default {
                          name:'mdbGoogleMapsPage',
                          components: {
                            mdbGoogleMap,
                            mdbRow,
                            mdbColumn,
                            mdbCard,
                            mdbView,
                            mdbGoogleMap
                          },
                          data() {
                            return {
                              coordinatesSat: [{
                                latitude: 48.856847,
                                longitude: 2.296832,
                                title: "Paris, France"
                              }],
                            }
                          }
                        };
                    

Map within contact form MDB Pro component

Contact us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.

Write to us:

We'll write rarely, but only with the best content.



San Francisco, CA 94126

United States

+ 01 234 567 89

Mon - Fri, 8:00-22:00

info@gmail.com

sale@gmail.com


                <section class="section pb-5">
                  <!--Section heading-->
                  <h2 class="section-heading h1 pt-4">Contact us</h2>
                  <!--Section description-->
                  <p class="section-description pb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>

                  <mdb-row>
                    <mdb-column lg="5" class="mb-4">
                      <mdb-card>
                        <mdb-card-body>
                          <div class="form-header blue accent-1">
                            <h3>
                              <mdb-icon icon="envelope"/> Write to us:</h3>
                          </div>
                          <p>We'll write rarely, but only with the best content.</p><br>
                          <mdb-input icon="user" label="Your name" iconClass="grey-text"/>
                          <mdb-input icon="envelope" label="Your email" iconClass="grey-text"/>
                          <mdb-input icon="tag" label="Subject" iconClass="grey-text"/>
                          <md-textarea icon="pencil" label="Your message" iconClass="grey-text" :rows="3"/>
                          <div class="text-center mt-4">
                            <mdb-btn color="light-blue">Submit</mdb-btn>
                          </div>
                        </mdb-card-body>
                      </mdb-card>
                    </mdb-column>

                    <mdb-column lg="7">
                      <mdb-google-map
                          name="form"
                          class="col-md-12"
                          :markerCoordinates="coordinates"
                          :zoom="14"
                          wrapperClass="z-depth-1-half"
                          :wrapperStyle="{ height: '400px'}">
                      </mdb-google-map>
                      <mdb-row class="text-center mt-4">
                        <mdb-column md="4">
                          <mdb-btn tag="a" floating icon="map-marker" class="blue accent-1" iconRight/>
                          <p>San Francisco, CA 94126</p>
                          <p>United States</p>
                        </mdb-column>
                        <mdb-column md="4">
                          <mdb-btn tag="a" floating icon="phone" class="blue accent-1"/>
                          <p>+ 01 234 567 89</p>
                          <p>Mon - Fri, 8:00-22:00</p>
                        </mdb-column>
                        <mdb-column md="4">
                          <mdb-btn tag="a" floating icon="envelope" class="blue accent-1"/>
                          <p>info@gmail.com</p>
                          <p>sale@gmail.com</p>
                        </mdb-column>
                      </mdb-row>
                    </mdb-column>
                  </mdb-row>

                </section>

            


                import { mdbRow, mdbColumn, mdbGoogleMap, mdbCard, mdbCardBody, mdbBtn, mdbInput, mdbIcon } from 'mdbvue';
                export default {
                  name:'mdbGoogleMapsPage',
                  components: {
                    mdbRow,
                    mdbColumn,
                    mdbGoogleMap,
                    mdbCard,
                    mdbCardBody,
                    mdbmdbBtn,
                    mdbInput,
                    mdbIcon
                  },
                  data() {
                    return {
                      coordinates: [{
                        latitude: 40.725118,
                        longitude: -73.997699,
                        title: 'New York'
                      }],
                    }
                  }
                };
            

Full width map within contact form MDB Pro component

Contact us


                    <section class="section pb-5">
                      <!--Section heading-->
                      <h2 class="section-heading h1 pt-4">Contact us</h2>
                      <!--Section description-->
                      <p class="section-description pb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>

                      <mdb-row>
                        <mdb-column lg="5" class="mb-4">
                          <mdb-card>
                            <mdb-card-body>
                              <div class="form-header blue accent-1">
                                <h3>
                                  <mdb-icon icon="envelope"/> Write to us:</h3>
                              </div>
                              <p>We'll write rarely, but only with the best content.</p><br>
                              <mdb-input icon="user" label="Your name" iconClass="grey-text"/>
                              <mdb-input icon="envelope" label="Your email" iconClass="grey-text"/>
                              <mdb-input icon="tag" label="Subject" iconClass="grey-text"/>
                              <md-textarea icon="pencil" label="Your message" iconClass="grey-text" :rows="3"/>
                              <div class="text-center mt-4">
                                <mdb-btn color="light-blue">Submit</mdb-btn>
                              </div>
                            </mdb-card-body>
                          </mdb-card>
                        </mdb-column>

                        <mdb-column lg="7">
                          <mdb-google-map
                              name="form"
                              class="col-md-12"
                              :markerCoordinates="coordinates"
                              :zoom="14"
                              wrapperClass="z-depth-1-half"
                              :wrapperStyle="{ height: '400px'}">
                          </mdb-google-map>
                          <mdb-row class="text-center mt-4">
                            <mdb-column md="4">
                              <mdb-btn tag="a" floating icon="map-marker" class="blue accent-1" iconRight/>
                              <p>San Francisco, CA 94126</p>
                              <p>United States</p>
                            </mdb-column>
                            <mdb-column md="4">
                              <mdb-btn tag="a" floating icon="phone" class="blue accent-1"/>
                              <p>+ 01 234 567 89</p>
                              <p>Mon - Fri, 8:00-22:00</p>
                            </mdb-column>
                            <mdb-column md="4">
                              <mdb-btn tag="a" floating icon="envelope" class="blue accent-1"/>
                              <p>info@gmail.com</p>
                              <p>sale@gmail.com</p>
                            </mdb-column>
                          </mdb-row>
                        </mdb-column>
                      </mdb-row>

                    </section>

                


                    import { mdbRow, mdbColumn, mdbGoogleMap, mdbCard, mdbCardBody, mdbBtn, mdbInput, mdbIcon } from 'mdbvue';
                    export default {
                      name:'mdbGoogleMapsPage',
                      components: {
                        mdbRow,
                        mdbColumn,
                        mdbGoogleMap,
                        mdbCard,
                        mdbCardBody,
                        mdbBtn,
                        mdbInput,
                        mdbIcon
                      },
                      data() {
                        return {
                          coordinates: [{
                            latitude: 40.725118,
                            longitude: -73.997699,
                            title: 'New York'
                          }],
                        }
                      }
                    };
                

Map within modal


                  <mdb-row>
                    <h2 class="mb-3 w-100">Map within modal</h2>
                    <mdb-row class="w-100 mb-4" center>
                      <mdb-btn color="primary" @click.native="regular=true">Regular Map Modal</mdb-btn>
                      <mdb-btn color="default" @click.native="satellite=true">Satellite Map Modal</mdb-btn>
                      <mdb-btn color="secondary" @click.native="custom=true">Custom Map Modal</mdb-btn>
                    </mdb-row>
                      <!-- Regular Map Modal -->
                      <mdb-modal v-if="regular" @close="regular=false" size="lg">
                        <mdb-modal-body class="p-0">
                          <mdb-google-map
                            name="modal-reg"
                            class="col-md-12"
                            style="height: 400px; position: relative; overflow: hidden"
                            :markerCoordinates="coordinates"
                            :zoom="14"
                            wrapperClass="z-depth-1-half"
                            :modal="regular">
                          </mdb-google-map>
                        </mdb-modal-body>
                        <mdb-modal-footer center>
                          <mdb-btn color="info" size="md">Save location<mdb-icon icon="map-marker" class="ml-1"/></mdb-btn>
                          <mdb-btn outline="info" size="md" @click.native="regular=false">close<mdb-icon icon="times" class="ml-1"/></mdb-btn>
                        </mdb-modal-footer>
                      </mdb-modal>

                      <!-- Satellite Map Modal -->
                      <mdb-modal v-if="satellite" @close="satellite=false" size="lg">
                        <mdb-modal-body class="p-0">
                          <mdb-google-map
                            name="modal-sat"
                            class="col-md-12"
                            style="height: 400px; position: relative; overflow: hidden"
                            :markerCoordinates="coordinatesSat"
                            :zoom="16"
                            wrapperClass="z-depth-1-half"
                            :modal="satellite"
                            type="satellite">
                          </mdb-google-map>
                        </mdb-modal-body>
                        <mdb-modal-footer center>
                          <mdb-btn color="default" size="md">Save location<mdb-icon icon="map-marker" class="ml-1"/></mdb-btn>
                          <mdb-btn outline="default" size="md" @click.native="satellite=false">close<mdb-icon icon="times" class="ml-1"/></mdb-btn>
                        </mdb-modal-footer>
                      </mdb-modal>

                      <!-- Custom Map Modal -->
                      <mdb-modal v-if="custom" @close="custom=false" size="lg">
                        <mdb-modal-body class="p-0">
                          <mdb-google-map
                            name="modal-custom"
                            class="col-md-12"
                            style="height: 400px; position: relative; overflow: hidden"
                            :markerCoordinates="coordinates"
                            :zoom="14"
                            :styles="styles"
                            wrapperClass="z-depth-1-half"
                            :modal="regular">
                          </mdb-google-map>
                        </mdb-modal-body>
                        <mdb-modal-footer center>
                          <mdb-btn color="secondary" size="md">Save location<mdb-icon icon="map-marker" class="ml-1"/></mdb-btn>
                          <mdb-btn outline="secondary" size="md" @click.native="custom=false">close<mdb-icon icon="times" class="ml-1"/></mdb-btn>
                        </mdb-modal-footer>
                      </mdb-modal>
                    </mdb-row>
              


                  import { mdbRow, mdbBtn, mdbModal, mdbModalBody, mdbModalFooter, mdbGoogleMap } from 'mdbvue';
                  export default {
                    name:'mdbGoogleMapsPage',
                    components: {
                      mdbRow,
                      mdbBtn,
                      mdbModal,
                      mdbModalBody,
                      mdbModalFooter,
                      mdbGoogleMap
                    },
                    data() {
                      return {
                        regular: false,
                        satellite: false,
                        custom: false,
                        coordinates: [{
                          latitude: 40.725118,
                          longitude: -73.997699,
                          title: 'New York'
                        }],
                        styles: [
                        {
                          "featureType": "administrative",
                          "elementType": "all",
                          "stylers": [{
                            "visibility": "off"
                          }]
                        }, {
                          "featureType": "poi",
                          "elementType": "all",
                          "stylers": [{
                            "visibility": "simplified"
                          }]
                        }, {
                          "featureType": "road",
                          "elementType": "all",
                          "stylers": [{
                            "visibility": "simplified"
                          }]
                        }, {
                          "featureType": "water",
                          "elementType": "all",
                          "stylers": [{
                            "visibility": "simplified"
                          }]
                        }, {
                          "featureType": "transit",
                          "elementType": "all",
                          "stylers": [{
                            "visibility": "simplified"
                          }]
                        }, {
                          "featureType": "landscape",
                          "elementType": "all",
                          "stylers": [{
                            "visibility": "simplified"
                          }]
                        }, {
                          "featureType": "road.highway",
                          "elementType": "all",
                          "stylers": [{
                            "visibility": "off"
                          }]
                        }, {
                          "featureType": "road.local",
                          "elementType": "all",
                          "stylers": [{
                            "visibility": "on"
                          }]
                        }, {
                          "featureType": "road.highway",
                          "elementType": "geometry",
                          "stylers": [{
                            "visibility": "on"
                          }]
                        }, {
                          "featureType": "road.arterial",
                          "elementType": "all",
                          "stylers": [{
                            "visibility": "off"
                          }]
                        }, {
                          "featureType": "water",
                          "elementType": "all",
                          "stylers": [{
                            "color": "#5f94ff"
                          },
                          {
                            "lightness": 26
                          },
                          {
                            "gamma": 5.86
                          }
                          ]
                        }, {
                          "featureType": "road.highway",
                          "elementType": "all",
                          "stylers": [{
                            "weight": 0.6
                          },
                          {
                            "saturation": -85
                          },
                          {
                            "lightness": 61
                          }
                          ]
                        }, {
                          "featureType": "landscape",
                          "elementType": "all",
                          "stylers": [{
                            "hue": "#0066ff"
                          },
                          {
                            "saturation": 74
                          },
                          {
                            "lightness": 100
                          }
                          ]
                        }
                      ],
                      }
                    }
                  };