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.
<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. |