Vue Bootstrap Google Maps

Vue Google Maps - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

This example creates a Google Map.

        
            
          <template>
            <mdb-google-map
              name="reg"
              class="col-md-12"
              style=" height: 500px"
              :zoom="14"
              :center="
                [{
                  latitude: 40.725118,
                  longitude: -73.997699
                }]"
              >
            </mdb-google-map>
          </template>
          
        
    
        
            
            <script>
              import {
                mdbGoogleMap
              } from 'mdbvue';
              export default {
                name: 'mdbGoogleMapsPage',
                components: {
                  mdbGoogleMap
                }
              }
            </script>
            
        
    

Custom map

With following example you can choose custom position.

        
            
      <template>
        <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>
      </template>
      
        
    
        
            
        <script>
          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
                      }
                    ]
                  }
                ]
              };
            }
          }
        </script>
        
        
    

Dynamically adding markers on the map

The following example adds a simple marker to a map.

        
            
          <template>
            <mdb-google-map 
              name="reg" 
              class="col-md-12" 
              :markerCoordinates="coordinates" 
              style=" height: 500px"
              :zoom="14"
            >
            </mdb-google-map>
          </template>
          
        
    
        
            
            <script>
              import {
                mdbGoogleMap
              } from 'mdbvue';
              export default {
                name: 'GoogleMapsPage',
                components: {
                  mdbGoogleMap
                },
                data() {
                  return {
                    coordinates: [{
                      latitude: 40.725118,
                      longitude: -73.997699,
                      title: 'New York'
                    }]
                  }
                }
              }
            </script>
            
        
    

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>
          
        
    
        
            
            <script>
              import {
                mdbGoogleMap
              } from 'mdb';
              export default {
                name: 'GoogleMapsPage',
                components: {
                  mdbGoogleMap
                },
                data() {
                  return {
                    coordinatesSat: [{
                      latitude: 48.856847,
                      longitude: 2.296832,
                      title: "Paris, France"
                    }]
                  }
                }
              }
            </script>
            
        
    

Full page map

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

        
            
      <template>
        <mdb-google-map 
          name="full" 
          class="col-md-12" 
          :markerCoordinates="coordinatesSat" 
          :zoom="16"
          :wrapperStyle="{width: '100vw', height: '100vh'}" 
          type="satellite"
        >
        </mdb-google-map>
      </template>
      
        
    
        
            
        <script>
          import {
            mdbGoogleMap
          } from 'mdbvue';
          export default {
            name: 'mdbGoogleMapsPage',
            components: {
              mdbGoogleMap
            },
            data() {
              return {
                coordinatesSat: [{
                  latitude: 48.856847,
                  longitude: 2.296832,
                  title: "Paris, France"
                }]
              }
            }
          }
        </script>
        
        
    

Map within a card

Regular map
Custom map
        
            
      <template>
        <mdb-row>
          <mdb-col 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-col>
          <mdb-col 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-col>
        </mdb-row>
      </template>
      
        
    
        
            
        <script>
          import {
            mdbGoogleMap,
            mdbRow,
            mdbCol,
            mdbCard,
            mdbView,
            mdbGoogleMap
          } from 'mdbvue';
          export default {
            name: 'mdbGoogleMapsPage',
            components: {
              mdbGoogleMap,
              mdbRow,
              mdbCol,
              mdbCard,
              mdbView,
              mdbGoogleMap
            },
            data() {
              return {
                coordinatesSat: [{
                  latitude: 48.856847,
                  longitude: 2.296832,
                  title: "Paris, France"
                }]
              }
            }
          }
        </script>
        
        
    

Map within contact form MDB Pro component

Use the example below to add a map next to your contact form to help people reach your location.

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

        
            
        <template>
          <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-col 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-col>
              <mdb-col 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-col 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-col>
                  <mdb-col 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-col>
                  <mdb-col md="4">
                    <mdb-btn tag="a" floating icon="envelope" class="blue accent-1" />
                    <p>info@gmail.com</p>
                    <p>sale@gmail.com</p>
                  </mdb-col>
                </mdb-row>
              </mdb-col>
            </mdb-row>
          </section>
        </template>
        
        
    
        
            
          <script>
            import {
              mdbRow,
              mdbCol,
              mdbGoogleMap,
              mdbCard,
              mdbCardBody,
              mdbBtn,
              mdbInput,
              mdbIcon
            } from 'mdbvue';
            export default {
              name: 'mdbGoogleMapsPage',
              components: {
                mdbRow,
                mdbCol,
                mdbGoogleMap,
                mdbCard,
                mdbCardBody,
                mdbmdbBtn,
                mdbInput,
                mdbIcon
              },
              data() {
                return {
                  coordinates: [{
                    latitude: 40.725118,
                    longitude: -73.997699,
                    title: 'New York'
                  }]
                }
              }
            }
          </script>
          
        
    

Full width map within contact form MDB Pro component

Use following example to get full-width map with contact form below it.

Contact us

        
            
        <template>
          <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-col 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-col>
              <mdb-col 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-col 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-col>
                  <mdb-col 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-col>
                  <mdb-col md="4">
                    <mdb-btn tag="a" floating icon="envelope" class="blue accent-1" />
                    <p>info@gmail.com</p>
                    <p>sale@gmail.com</p>
                  </mdb-col>
                </mdb-row>
              </mdb-col>
            </mdb-row>
          </section>
        </template>
        
        
    
        
            
          <script>
            import {
              mdbRow,
              mdbCol,
              mdbGoogleMap,
              mdbCard,
              mdbCardBody,
              mdbBtn,
              mdbInput,
              mdbIcon
            } from 'mdbvue';
            export default {
              name: 'mdbGoogleMapsPage',
              components: {
                mdbRow,
                mdbCol,
                mdbGoogleMap,
                mdbCard,
                mdbCardBody,
                mdbBtn,
                mdbInput,
                mdbIcon
              },
              data() {
                return {
                  coordinates: [{
                    latitude: 40.725118,
                    longitude: -73.997699,
                    title: 'New York'
                  }]
                }
              }
            }
          </script>
          
        
    

Map within modal

Use modal example to view map after viewing the modal.

        
            
          <template>
            <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 :show="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 :show="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 :show="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>
          </template>
          
        
    
        
            
            <script>
              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
                        }
                      ]
                    }]
                  }
                }
              }
            </script>
            
        
    

Vue Google Maps - API

In this section you will find informations about how to calibrate a map.


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
center Array [{latitude: 40.725118, longitude: -73.997699}] Map center coordinates
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.
manualInit Boolean false Use this prop if You want to init Google script manually only when the component is loaded.