Cacher is the code snippet organizer for pro developers

<div id="location"><h1  class="text-center"></h1></div>

<div  class="map_container">
  <div class="map-responsive">
    <div id="map"></div>
  </div>
</div>


<script type="text/javascript" src="http://www.webestools.com/google_map_gen.js?lati=<?php echo $latitude; ?>&long=<?php echo $longitude; ?>&zoom=13&width=675&height=400&mapType=normal&map_btn_normal=yes&map_btn_satelite=yes&map_btn_mixte=yes&map_small=yes&marqueur=yes&info_bulle="></script><br />
<!-- this section will add a google maps form for the user to submit their location   -->
  ENTER LOCATION 
	<form action="http://maps.google.com/maps" method="get" target="_blank">
	   <label for="saddr">Enter your location</label>
	   <input type="text" name="saddr" />
	   <input type="hidden" name="daddr" value="<?php  the_field('map') ; ?>" />
	   <input type="submit" value="Get directions" />
	</form>
	
	
	
	
	
	
	
    <?php
     // Get latitude and longitude by address         
        $address = get_field('map') ;  
        $prop_title = get_field('property_title') ;
        $prop_title .= '<br>' . $address ; // append property address below prop title
        $property_title = '"' . $prop_title . '"' ;
        $prepAddr = str_replace(' ','+',$address);
        $geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false');
        $output= json_decode($geocode);
        $latitude  = $output->results[0]->geometry->location->lat;
        $longitude = $output->results[0]->geometry->location->lng;
    ?>   


<script >
	  // locations go here, in this case only one location (marker) will be shown
    var locations = [
        <?php
        echo '[' .$property_title . ',' . $latitude . ',' . $longitude   . '], ' ;
        ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: <?php the_field('map_zoom') ; ?>,  // let the user pick the zoom value for the map
      scrollwheel: false, // disable scrollwheel zoom, this should always be the default  >_<
      center: new google.maps.LatLng(<?php  echo $latitude ?>, <?php echo $longitude ?>),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
  		// controls map terrain: [map|satellite]
  		mapTypeControlOptions: {
  		style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
  		position: google.maps.ControlPosition.TOP_CENTER
  		},
  		// this controls the plus/minus buttons
  		zoomControlOptions: {
  		position: google.maps.ControlPosition.LEFT_CENTER
  		},
  		// yellow man position
  		streetViewControlOptions: {
  		position: google.maps.ControlPosition.LEFT_TOP
  		}
    }); // end var map

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

    var marker, i;
	
	// this is for 1 or more locations locations array to build the markers
    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>