"Bootstrap Google Maps - Material Design & Bootstrap 4"
Bootstrap 4.0.0 Snippet by MDBootstrap

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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">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">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>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); @import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css); .hm-gradient { background-color: #eee; } .darken-grey-text { color: #2E2E2E; }
// 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);

Related: See More


Questions / Comments: