Cacher is the code snippet organizer for pro developers

Add this to header:
<script src="http://maps.google.com/maps/api/js?sensor=false"  type="text/javascript"></script>



HTML:
LOCATIONS:
<div id="map" style="max-width: 1110px; height: 550px;"></div>




JS + PHP:
<?php
// dont specify taxonomy slug name, we want to get all addresses via the custom field 'map'
$args = array ( 'taxonomy'  => 'tr_portfolio_taxonomy',
				        'post_type' => 'tr_portfolio'   				
			        );

$coords = array();  // store all map addresses in this array
$coords_first = array() ;
$map_coordinates = new WP_Query($args);
$maps_counter = 0;
?>

<script>

   var locations = [
    <?php  // LOOP through all properties
		if ( have_posts() ) : while ( $map_coordinates->have_posts() ) : $map_coordinates->the_post(); 

		    $coords[] = get_field('address') ; // Keep adding all addresses in coords array 
		    $address_first = $coords[0] ;  // get first coordinate, this is to be used as default location on page load
	    	$address = $coords[$maps_counter] ; // map_counter increments to the next index in each loop
	    	$prop_title = get_field('property_title') ;
	    	$property_title = '"' .  $prop_title  ;	    	
	    	$prop_address = get_field('address') ;
	    	$property_address =   $prop_address . '"' ;
	    	$prepAddr_first = str_replace(' ','+',$address_first); // format for first coordinates
	      $prepAddr = str_replace(' ','+',$address); // format for google maps URL
	      $geocode_first=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$prepAddr_first.'&sensor=false');
	      $geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false');
	      $output_first= json_decode($geocode_first);
	      $output= json_decode($geocode);
	      $latitude_first = $output->results[0]->geometry->location->lat;
	      $longitude_first = $output->results[0]->geometry->location->lng;
	      $latitude = $output->results[0]->geometry->location->lat;
	      $longitude = $output->results[0]->geometry->location->lng;
	        
	        echo '[' . $property_title . ' - ' .  $property_address . ',' . $latitude . ',' . $longitude   . '], ' ;		
	        $maps_counter++;  // increment array index by 1 on each loop
			endwhile; endif; wp_reset_postdata();	
    ?>


    ];


<?php

?>
    var map = new google.maps.Map(document.getElementById('map'), {
      // Let the user pick a zoom value
      zoom: <?php the_field('map_zoom') ?>,
      scrollwheel: false,
      center: new google.maps.LatLng(<?php echo $latitude_first ?>, <?php echo $longitude_first ?>),
      //center: new google.maps.LatLng(25.6841274, -80.314415),  
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    // add markers to Map
    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
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
</script>