Embed Material Design Bootstrap 4 Google Maps
If you want to display realtime location on your website contact page then you have to embed google map, in this post i am going to share awesome Material Design Bootstrap 4 Google Maps Embed code design, So that you can display your contact address on google map with awesome material design, In the example you can see both type of map simple default map with addressed icon + satellite map. The functionality of the regular map and custom map is the same. We can see our location as well as the direction and the place name. You can also zoom in or zoom out by simply using the + and – icon.
HTML
Built with Material Design for Bootstrap 4
Free download
Regular map
Custom map
Satellite map
Here you can find more Google Maps:
Bootstrap Google Maps
CSS
.hm-gradient {
background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
color: #2E2E2E;
}
JS
// Satellite map
function satellite_map() {
var var_location = new google.maps.LatLng(48.856847, 2.296832);
var var_mapoptions = {
center: var_location,
zoom: 16,
mapTypeId: 'satellite'
};
var var_map = new google.maps.Map(document.getElementById("map-container-3"),
var_mapoptions);
var var_marker = new google.maps.Marker({
position: var_location,
map: var_map,
title: "Paris, France"
});
}
// Regular map
function regular_map() {
var var_location = new google.maps.LatLng(40.725118, -73.997699);
var var_mapoptions = {
center: var_location,
zoom: 14
};
var var_map = new google.maps.Map(document.getElementById("map-container"),
var_mapoptions);
var var_marker = new google.maps.Marker({
position: var_location,
map: var_map,
title: "New York"
});
}
// Custom map
function custom_map() {
var var_location = new google.maps.LatLng(40.725118, -73.997699);
var var_mapoptions = {
center: var_location,
zoom: 14,
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
}
]
}
]
};
var var_map = new google.maps.Map(document.getElementById("map-container-2"),
var_mapoptions);
var var_marker = new google.maps.Marker({
position: var_location,
map: var_map,
title: "New York"
});
}
// Initialize maps
google.maps.event.addDomListener(window, 'load', satellite_map);
google.maps.event.addDomListener(window, 'load', regular_map);
google.maps.event.addDomListener(window, 'load', custom_map);
See live demo and download source code.
|
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
This awesome script developed by mdbootstrap. Visit their official repository for more information and follow for future updates.
