"Multiple Location Google Map"
Bootstrap 4.0.0 Snippet by akshayptdr4

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div id="map_wrapper"> <div id="map_canvas" class="mapping"></div> </div> <div class="container" <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center mt20"> Created for <a href="https://goo.gl/NPfPMk" target="_blank">easetemplate</a> </div></div> </div>
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Poppins', sans-serif; letter-spacing: 0px; font-size: 16px; color: #777b80; font-weight: 400; line-height: 1.8; } h1, h2, h3, h4, h5, h6 { letter-spacing: 0px; font-weight: 500; color: #2e3133; margin: 0px 0px 15px 0px; font-family: 'Poppins', sans-serif; } h1 { font-size: 40px; line-height: 52px; } h2 { font-size: 32px; line-height: 42px; } h3 { font-size: 24px; line-height: 34px; } h4 { font-size: 22px; line-height: 32px; } h5 { font-size: 16px; line-height: 20px; } h6 { font-size: 14px; line-height: 18px; } p { margin: 0 0 20px; line-height: 1.7; } p:last-child { margin: 0px; } ul, ol { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; color: #777b80; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:focus, a:hover { text-decoration: none; color: #023981; } .btn-link { color: #304496; font-size: 14px; font-weight: 700; text-transform: uppercase; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; position: relative; letter-spacing: 0px; border-bottom: 1px solid #304496; } .btn-link:hover { color: #263679; text-decoration: none; border-bottom: 1px solid #263679; } #map_wrapper { height: 400px; } #map_canvas { width: 100%; height: 100%; } .location-block { margin-bottom: 20px; } .location-content { font-size: 14px; font-weight: 500; } .location-head { margin-bottom: 20px; } .location-icon { font-size: 18px; color: #023981; padding-right: 6px; } .location-title { font-weight: 600; color: #023981; font-size: 18px; text-transform: uppercase; letter-spacing: 2px; } .info_content{background-color: #fff; padding: 10px;} .info_location_name{color: #023981; font-size: 16px; font-weight: 700; text-transform:uppercase; margin-bottom: 10px; } .info_location_text{ margin-bottom: 10px; color: #767a7f; font-size: 13px; font-weight:500; line-height: 20px;} .info_location_call{ font-size: 14px; color: #2e3133; font-weight: 600; } .info_location_call span{padding-right: 8px; font-size: 14px; color: #023981;} .mt30{margin-top:20px;}
jQuery(function($) { // Asynchronously Load the map API var script = document.createElement('script'); script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBZib4Lvp0g1L8eskVBFJ0SEbnENB6cJ-g&callback=initialize"; document.body.appendChild(script); }); function initialize() { var map; var bounds = new google.maps.LatLngBounds(); var mapOptions = { mapTypeId: 'roadmap' }; // Display a map on the page map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); map.setTilt(45); // Multiple Markers var markers = [ ['Ahmedabad, Gujarat', 23.0201818, 72.4396589], ['Baroda,Gujarat', 22.3220876, 73.1030464], ['Surat, Gujarat', 21.1591857, 72.7522564], ['Jamnagar, Gujarat', 22.4743153, 69.9883737] ]; // Info Window Content var infoWindowContent = [ ['<div class="info_content">' + '<h3 class="info_location_name">Ahmedabad</h3>' + '<p class="info_location_text">758, Shady Pines Drive Martinsville, Ahmedabad</p>' + '<p class="info_location_call"><span><i class="fa fa-phone"></i></span>(800) 123-4567</p>' + '<a href="#" class="btn-link">View Location</a>' + '</div>' ], ['<div class="info_content">' + '<h3 class="info_location_name">Baroda</h3>' + '<p class="info_location_text">2105, Daylene Drive Southfield,Baroda</p>' + '<p class="info_location_call"><span><i class="fa fa-phone"></i></span>(800) 123-1314</p>' + '<a href="#" class="btn-link">View Location</a>' + '</div>' ], ['<div class="info_content">' + '<h3 class="info_location_name">Surat</h3>' + '<p class="info_location_text">1012, Matthews StreetSterling, Surat</p>' + '<p class="info_location_call"><span><i class="fa fa-phone"></i></span>(800) 123-1112</p>' + '<a href="#" class="btn-link">View Location</a>' + '</div>' ], ['<div class="info_content">' + '<h3 class="info_location_name">Jamnagar</h3>' + '<p class="info_location_text">1537, Rosewood Court Holland, Jamnagar</p>' + '<p class="info_location_call"><span><i class="fa fa-phone"></i></span>(800) 123-8910</p>' + '<a href="#" class="btn-link">View Location</a>' + '</div>' ] ]; // Display multiple markers on a map var infoWindow = new google.maps.InfoWindow({ maxWidth: 280 }), marker, i; // Loop through our array of markers & place each one on the map for (i = 0; i < markers.length; i++) { var position = new google.maps.LatLng(markers[i][1], markers[i][2], markers[i][3], markers[i][4]); bounds.extend(position); marker = new google.maps.Marker({ position: position, map: map, title: markers[i][0] }); // Allow each marker to have an info window google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { return function() { infoWindow.setContent(infoWindowContent[i][0]); infoWindow.open(map, marker); } })(marker, i)); // Automatically center the map fitting all markers on the screen map.fitBounds(bounds); } // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) var tilesloadedListener = google.maps.event.addListener((map), 'tilesloaded', function(event) { this.setZoom(5); google.maps.event.removeListener(tilesloadedListener); }); }

Related: See More


Questions / Comments: