Google Maps 1 Location VERSION 2
ref: http://jsfiddle.net/haG2S/
HTML:
<div class="map_container">
<div class="map-responsive">
<div id="map" style=""></div>
</div>
<div class="clear"></div>
<div id="directionsPanel"></div>
</div>
JS AND PHP:
<!-- =================================== GET LATITUDE AND LONGITUDE ========================================= -->
<?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 property title
$property_title = '"' . $prop_title . '"' ; // add quotes around 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 >
var latlng = new google.maps.LatLng(<?php echo $latitude ?>, <?php echo $longitude ?>);
var myOptions = {
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: latlng,
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
}
};
var map = new google.maps.Map(document.getElementById("map") , myOptions );
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $latitude ?>, <?php echo $longitude ?>),
map: map,
title: 'Atlanta/Sandy Springs',
clickable: true
});
var infowindow = new google.maps.InfoWindow({
content: "Your address: <input id='clientAddress' type='text'>"+
"<input type='button' onClick=getDir() value='Go!'>"
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
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"));
</script>
<script>
function getDir() {
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(<?php echo $latitude ?>, <?php echo $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.";
}
});
}
</script>