"custom google map snazzy map"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script> <div id="map_div" style="height: 400px;"></div> <script> var map; google.maps.event.addDomListener(window, "load", function () { var map = new google.maps.Map(document.getElementById("map_div"), { center: new google.maps.LatLng(33.808678, -117.918921), zoom: 11, mapTypeId: google.maps.MapTypeId.ROADMAP, // this is the only add to make the map styled styles: [{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]}, {"featureType":"administrative.country","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#e3e3e3"}]},{"featureType":"landscape.natural","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"color":"#cccccc"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit.station.airport","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"transit.station.airport","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#FFFFFF"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"off"}]}] }); var infoWindow = new google.maps.InfoWindow(); function createMarker(options, html) { var marker = new google.maps.Marker(options); if (html) { google.maps.event.addListener(marker, "click", function () { infoWindow.setContent(html); infoWindow.open(options.map, this); }); } return marker; } // we need to create two "layers" for each marker, since we're not dealing with something that's a path. var markerOutsideFilled = createMarker({ position: new google.maps.LatLng(33.808678, -117.928921), map: map, icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: '#FFFFFF', fillOpacity: 1, scale: 12, strokeColor: '#7710bf', strokeWeight: 1 } }); var markerInsideFilled = createMarker({ position: new google.maps.LatLng(33.808678, -117.928921), map: map, icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: '#7710bf', fillOpacity: 1, scale: 5, strokeColor: '#7710bf', strokeWeight: 4 } }, "Filled Marker"); var markerOutsideUnfilled = createMarker({ position: new google.maps.LatLng(33.808678, -117.918921), map: map, icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: '#FFFFFF', fillOpacity: 1, scale: 12, strokeColor: '#7710bf', strokeWeight: 1 } }); var markerInsideUnfilled = createMarker({ position: new google.maps.LatLng(33.808678, -117.918921), map: map, icon: { path: google.maps.SymbolPath.CIRCLE, fillOpacity: 0, scale: 5, strokeColor: '#7710bf', strokeWeight: 4 } }, "Unfilled Marker"); }); </script>
#map { width: 750px; height: 500px; }

Related: See More


Questions / Comments: