Cacher is the code snippet organizer for pro developers

STYLES:
#map {
    position: relative;
    width: 100%;
    left: 0;
    height: 550px;
}

.expand_directions {
    max-width: 1000px;
    margin: 10px auto 0 auto;
    overflow: hidden;
}




HTML

<div id="map"></div>

<div id="directionsPanel" style="display:none;"></div>
 
<div id="hide_map" style="display:none;">
    <input class="btn btn-default" type="button" onClick="hideMap();" value="Close Map Directions">
</div>



JS
<script src="https://maps.googleapis.com/maps/api/js?key={{ $settings->google_maps_api  }}"></script>


<script>
$(document).ready( function() {

    // LOCATIONS
    var locations = [
      <?php foreach ( $properties as $property)  : 

      echo '["' . $property->name . '",' . $property->latitude . ',' . $property->longitude . '],' ;  
      endforeach ; ?>

    ];

    // Info Window Content
    var infoWindowContent = [

        <?php  foreach( $properties as $property )   : ?>

        ['<div class="info_content">' + `<strong><?php echo $property->name ; ?></strong>` + `<p><?php echo $property->location ; ?></p>` +  '<p>Get Directions:<br><input id="clientAddress" type="text"><input class="btn btn-primary dir_btn" type="button" onClick="getDir(<?php echo $property->latitude; ?>, <?php echo $property->longitude ; ?> )" value="Search"></p> '  +'</div>'],

        <?php endforeach ; ?>
     
    ];
    

 
    var map = new google.maps.Map(document.getElementById('map'), {
    // center: new google.maps.LatLng(39, -95), // CENTER US
        zoom: 13,
        // styles: [ ... ] ,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
    });


    var infoWindow = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds();
 
    var marker, i;
 
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        title: locations[i][0]
      });

      bounds.extend(marker.position); 
 
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infoWindow.setContent(infoWindowContent[i][0]);
          // infowindow.setContent(locations[i][0]);
          infoWindow.open(map, marker);
        }
      })(marker, i));
    }

      
    map.fitBounds(bounds); // fit the map to the newly inclusive bounds

    // ========= PRINT MAP DIRECTIONS =============
    geocoder = new google.maps.Geocoder();
    directionsService = new google.maps.DirectionsService();
    
    directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: false
    });
    
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel") );
    

    // ========= OVERRIDE OUR MAP FITBOUNDS =============
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        //this.setZoom(8);
        google.maps.event.removeListener(boundsListener);
        map.fitBounds(bounds); 
    });
    


} ) ; // END DOCUMENT READY


// =============== MAP HELPER FUNCTIONS ================

function getDir( latitude, longitude) {
	$('#directionsPanel').addClass('expand_directions').show(2500) ;
	$('#hide_map').show() ;
	// clientAddress is the address inside the map markers
    geocoder.geocode({
        'address': document.getElementById('clientAddress').value
    },
 
    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var origin = results[0].geometry.location;
            var destination = new google.maps.LatLng( latitude, longitude );
 
            var request = {
                origin: origin,
                destination: destination,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
 
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
 
        } else {
            document.getElementById('clientAddress').value =
                "Directions cannot be computed at this time.";
        }
    });
}	
	
 
function hideMap() {
	$('#directionsPanel').hide() ;
	$('#hide_map').hide() ;
}	
	

</script>