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.
Embed Material Design Bootstrap 4 Google Maps

HTML

<body class="hm-gradient">
 
    <main>
 
        <!--MDB -->
        <div class="container mt-4">
 
            <div class="text-center darken-grey-text mb-4">
                <h1 class="font-bold mt-4 mb-3 h5">Built with Material Design for Bootstrap 4</h1>
                <a class="btn btn-danger btn-md" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank" rel="noopener noreferrer">Free download<i class="fa fa-download pl-2"></i></a>
            </div>
 
            <!--Section: Regular maps-->
            <section>
 
                <!--Grid row-->
                <div class="row">
 
                    <!--Grid column-->
                    <div class="col-md-6 mb-4">
 
                        <!--Card-->
                        <div class="card">
 
                            <!--Card content-->
                            <div class="card-body text-center">
 
                                <h4 class="font-up font-bold deep-purple-text mb-3"><strong>Regular map</strong></h4>
 
                                <!--Google map-->
                                <div id="map-container" class="z-depth-1" style="height: 300px"></div>
 
                            </div>
                            <!--/.Card content-->
 
                        </div>
                        <!--/.Card-->
 
                    </div>
                    <!--Grid column-->
 
                    <!--Grid column-->
                    <div class="col-md-6 mb-4">
 
                        <!--Card-->
                        <div class="card">
 
                            <!--Card content-->
                            <div class="card-body text-center">
 
                                <h4 class="font-up font-bold deep-purple-text mb-3"><strong>Custom map</strong></h4>
 
                                <!--Google map-->
                                <div id="map-container-2" class="z-depth-1" style="height: 300px"></div>
 
                            </div>
                            <!--/.Card content-->
 
                        </div>
                        <!--/.Card-->
 
                    </div>
                    <!--Grid column-->
 
                </div>
                <!--Grid row-->
 
            </section>
            <!--Section: Regular maps-->
 
            <!--Section: Satellite map-->
            <section class="mb-4">
 
                <!--Card-->
                <div class="card">
 
                    <!--Card content-->
                    <div class="card-body text-center">
 
                        <h4 class="font-up font-bold deep-purple-text mb-3"><strong>Satellite map</strong></h4>
 
                        <!--Google map-->
                        <div id="map-container-3" class="z-depth-1" style="height: 300px"></div>
 
                    </div>
                    <!--/.Card content-->
 
                </div>
                <!--/.Card-->
 
            </section>
            <!--Section: Satellite map-->
 
 
            <hr class="my-4">
 
            <div class="text-center darken-grey-text mb-4">
                <h3 class="font-bold mb-3">Here you can find more Google Maps:</h3>
                <a class="btn btn-danger" href="https://mdbootstrap.com/javascript/bootstrap-google-map/" target="_blank" rel="noopener noreferrer">Bootstrap Google Maps</a>
            </div>
 
        </div>
        <!--MDB -->
 
    </main>
 
  <!--Add this script to your HTML file-->
  <script src="https://maps.google.com/maps/api/js"></script>
 
</body>


CSS

.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: #2E2E2E;
}


JS


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"
    });
 
}
 

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"
    });
 
}
 

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"
    });
 
}
 

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.