Sign in


Sign up


Bootstrap Google Map

Bootstrap Google 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 a small piece of JS code.

Examples of Bootstrap Google Maps use:

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

See the following Bootstrap Google maps examples:


Regular map

                
<!--Google Maps-->
<script src="https://maps.google.com/maps/api/js"></script>
                
            
                
// 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"
    });
}

// Initialize maps
google.maps.event.addDomListener(window, 'load', regular_map);
                
            
                
<!--Google map-->
<div id="map-container" class="z-depth-1" style="height: 500px"></div>
                
            

Custom map

                
<!--Google Maps-->
<script src="https://maps.google.com/maps/api/js"></script>
                
            
                
// 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', custom_map);
                
            
                
<!--Google map-->
<div id="map-container-2" class="z-depth-1" style="height: 500px"></div>
                
            

Satellite map

                
<!--Google Maps-->
<script src="https://maps.google.com/maps/api/js"></script>
                
            
                
// 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"
    });
}

// Initialize maps
google.maps.event.addDomListener(window, 'load', satellite_map);
                
            
                
<!--Google map-->
<div id="map-container-3" class="z-depth-1" style="height: 500px"></div>
                
            

Full page map

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

                
<!--Google Maps-->
<script src="https://maps.google.com/maps/api/js"></script>
                
            
                
function init_map() {

    var var_location = new google.maps.LatLng(40.725118, -73.997699);

    var var_mapoptions = {
        center: var_location,
        zoom: 14
    };

    var var_marker = new google.maps.Marker({
        position: var_location,
        map: var_map,
        title: "New York"
    });

    var var_map = new google.maps.Map(document.getElementById("map-container-4"),
        var_mapoptions);

    var_marker.setMap(var_map);

}

google.maps.event.addDomListener(window, 'load', init_map);
                
            
                
<!--Main layout-->
<main class=" m-0 p-0">
    <div class="container-fluid m-0 p-0">

        <!--Google map-->
        <div id="map-container-4" style="height: 100vh"></div>

    </div>
</main>
<!--Main layout-->
                
            

Map within card MDB Pro component

Regular map
Custom map
                
<!--Google Maps-->
<script src="https://maps.google.com/maps/api/js"></script>
                
            
                
// 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-5"),
        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-6"),
        var_mapoptions);

    var var_marker = new google.maps.Marker({
        position: var_location,
        map: var_map,
        title: "New York"
    });
}

google.maps.event.addDomListener(window, 'load', regular_map);
google.maps.event.addDomListener(window, 'load', custom_map);
                
            
                
<!--Grid row-->
<div class="row">

    <!--Grid column-->
    <div class="col-md-6 mb-r">

        <!--Card-->
        <div class="card card-cascade narrower">

            <!--Card image-->
            <div class="view gradient-card-header blue-gradient">
                <h5 class="mb-0">Regular map</h5>
            </div>
            <!--/Card image-->

            <!--Card content-->
            <div class="card-body text-center">

                <!--Google map-->
                <div id="map-container-5" class="z-depth-1" style="height: 300px"></div>

            </div>
            <!--/.Card content-->

        </div>
        <!--/.Card-->

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-md-6 mb-r">

        <!--Card-->
        <div class="card card-cascade narrower">

            <!--Card image-->
            <div class="view gradient-card-header peach-gradient">
                <h5 class="mb-0">Custom map</h5>
            </div>
            <!--/Card image-->

            <!--Card content-->
            <div class="card-body text-center">

                <!--Google map-->
                <div id="map-container-6" class="z-depth-1" style="height: 300px"></div>

            </div>
            <!--/.Card content-->

        </div>
        <!--/.Card-->

    </div>
    <!--Grid column-->

</div>
<!--Grid row-->
                
            

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

                
<!--Google Maps-->
<script src="https://maps.google.com/maps/api/js"></script>
                
            
                
// 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-7"),
        var_mapoptions);

    var var_marker = new google.maps.Marker({
        position: var_location,
        map: var_map,
        title: "New York"
    });
}

google.maps.event.addDomListener(window, 'load', regular_map);
                
            
                
<!--Section: Contact v.1-->
<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>

    <div class="row">

        <!--Grid column-->
        <div class="col-lg-5 mb-4">

            <!--Form with header-->
            <div class="card">

                <div class="card-body">
                    <!--Header-->
                    <div class="form-header blue accent-1">
                        <h3><i class="fa fa-envelope"></i> Write to us:</h3>
                    </div>

                    <p>We'll write rarely, but only the best content.</p>
                    <br>

                    <!--Body-->
                    <div class="md-form">
                        <i class="fa fa-user prefix grey-text"></i>
                        <input type="text" id="form-name" class="form-control">
                        <label for="form-name">Your name</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-envelope prefix grey-text"></i>
                        <input type="text" id="form-email" class="form-control">
                        <label for="form-email">Your email</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-tag prefix grey-text"></i>
                        <input type="text" id="form-Subject" class="form-control">
                        <label for="form-Subject">Subject</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-pencil prefix grey-text"></i>
                        <textarea type="text" id="form-text" class="md-textarea"></textarea>
                        <label for="form-text">Icon Prefix</label>
                    </div>

                    <div class="text-center">
                        <button class="btn btn-light-blue">Submit</button>
                    </div>

                </div>

            </div>
            <!--Form with header-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-7">

            <!--Google map-->
            <div id="map-container-7" class="z-depth-1-half map-container" style="height: 400px"></div>

            <br>
            <!--Buttons-->
            <div class="row text-center">
                <div class="col-md-4">
                    <a class="btn-floating blue accent-1"><i class="fa fa-map-marker"></i></a>
                    <p>San Francisco, CA 94126</p>
                    <p>United States</p>
                </div>

                <div class="col-md-4">
                    <a class="btn-floating blue accent-1"><i class="fa fa-phone"></i></a>
                    <p>+ 01 234 567 89</p>
                    <p>Mon - Fri, 8:00-22:00</p>
                </div>

                <div class="col-md-4">
                    <a class="btn-floating blue accent-1"><i class="fa fa-envelope"></i></a>
                    <p>info@gmail.com</p>
                    <p>sale@gmail.com</p>
                </div>
            </div>

        </div>
       <!--Grid column-->

    </div>

</section>
<!--Section: Contact v.1-->
                
            

Full width map within contact form MDB Pro component

Contact us

                
.primary-textarea.md-form label.active {
    color: #4285F4;
}
                
            
                
<!--Google Maps-->
<script src="https://maps.google.com/maps/api/js"></script>
                
            
                
// 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-8"),
        var_mapoptions);

    var var_marker = new google.maps.Marker({
        position: var_location,
        map: var_map,
        title: "New York"
    });
}

google.maps.event.addDomListener(window, 'load', regular_map);
                
            
                
<!--Section: Contact v.2-->
<section class="section">

    <!--Section heading-->
    <h2 class="section-heading h1 pt-4 mb-5">Contact us</h2>

    <div class="card">
        
        <div class="card-body">
            
            <!--Google map-->
            <div id="map-container-8" class="z-depth-1-half map-container mb-4" style="height: 200px"></div>

            <div class="row">

                <!--Grid column-->
                <div class="col-md-6">
                    <form>

                        <div class="md-form">
                            <input type="text" id="contact-name" class="form-control">
                            <label for="contact-name" class="">Your name</label>
                        </div>

                        <div class="md-form">
                            <input type="text" id="contact-email" class="form-control">
                            <label for="contact-email" class="">Your email</label>
                        </div>

                        <div class="md-form">
                            <input type="text" id="contact-Subject" class="form-control">
                            <label for="contact-Subject" class="">Subject</label>
                        </div>

                    </form>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-6">
                    <div class="md-form primary-textarea">
                        <textarea type="text" id="contact-message" class="md-textarea" style="height: 156px;"></textarea>
                        <label for="contact-message">Your message</label>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-12">
                    <div class="center-on-small-only">
                        <a class="btn btn-mdb-color btn-block">Send Message</a>
                    </div>
                </div>
                <!--Grid column-->

            </div>

        </div>

    </div>

</section> 
<!--Section: Contact v.2-->
                
            

Map within modal

                
<!--Google Maps-->
<script src="https://maps.google.com/maps/api/js"></script>
                
            
                
var map1;

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {
    var var_map = document.getElementById("map-container-9");

    var var_location = new google.maps.LatLng(40.725118, -73.997699);

    var var_mapoptions = {
        center: var_location,
        zoom: 14
    };

    map1 = new google.maps.Map(var_map, var_mapoptions)
}

$('#modalRegular').on('shown.bs.modal', function () {
    google.maps.event.trigger(map1, "resize");
});


var map;

google.maps.event.addDomListener(window, 'load', initialize2);

function initialize2() {
    var var_map = document.getElementById("map-container-11");

    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
                    }
                ]
            }
        ]
    };

    map = new google.maps.Map(var_map, var_mapoptions)
}

$('#modalCustom').on('shown.bs.modal', function () {
    google.maps.event.trigger(map, "resize");
});


var map2;

google.maps.event.addDomListener(window, 'load', initialize3);

function initialize3() {
    var var_map = document.getElementById("map-container-10");

    var var_location = new google.maps.LatLng(48.856847, 2.296832);

    var var_mapoptions = {
        center: var_location,
        zoom: 16,
        mapTypeId: 'satellite'
    };

    map2 = new google.maps.Map(var_map, var_mapoptions)
}

$('#modalSatellite').on('shown.bs.modal', function () {
    google.maps.event.trigger(map2, "resize");
});
                
            
                
<div class="text-center">

    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalRegular">Regular map modal</button>
    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSatellite">Satellite map modal</button>
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalCustom">Custom map modal</button>

</div>

<!--Modal: Name-->
<div class="modal fade" id="modalRegular" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">

        <!--Content-->
        <div class="modal-content">

            <!--Body-->
            <div class="modal-body mb-0 p-0">

                <!--Google map-->
                <div id="map-container-9" class="z-depth-1-half" style="height: 400px"></div>

            </div>

            <!--Footer-->
            <div class="modal-footer justify-content-center">

                <button type="button" class="btn btn-info btn-md">Save location <i class="fa fa-map-marker ml-1"></i></button>
                <button type="button" class="btn btn-outline-info btn-md" data-dismiss="modal">Close <i class="fa fa-times ml-1"></i></button>

            </div>

        </div>
        <!--/.Content-->

    </div>
</div>
<!--Modal: Name-->

<!--Modal: Name-->
<div class="modal fade" id="modalSatellite" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">

        <!--Content-->
        <div class="modal-content">

            <!--Body-->
            <div class="modal-body mb-0 p-0">

                <!--Google map-->
                <div id="map-container-10" class="z-depth-1-half" style="height: 400px"></div>

            </div>

            <!--Footer-->
            <div class="modal-footer justify-content-center">

                <button type="button" class="btn btn-default btn-md">Save location <i class="fa fa-map-marker ml-1"></i></button>
                <button type="button" class="btn btn-outline-default btn-md" data-dismiss="modal">Close <i class="fa fa-times ml-1"></i></button>

            </div>

        </div>
        <!--/.Content-->

    </div>
</div>
<!--Modal: Name-->

<!--Modal: Name-->
<div class="modal fade" id="modalCustom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">

        <!--Content-->
        <div class="modal-content">

            <!--Body-->
            <div class="modal-body mb-0 p-0">

                <!--Google map-->
                <div id="map-container-11" class="z-depth-1-half" style="height: 400px"></div>

            </div>

            <!--Footer-->
            <div class="modal-footer justify-content-center">

                <button type="button" class="btn btn-secondary btn-md">Save location <i class="fa fa-map-marker ml-1"></i></button>
                <button type="button" class="btn btn-outline-secondary btn-md" data-dismiss="modal">Close <i class="fa fa-times ml-1"></i></button>

            </div>

        </div>
        <!--/.Content-->

    </div>
</div>
<!--Modal: Name-->