Google Directions from Map Marker

4/25/2017 - 1:23 PM
Google Directions from Map Marker

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<script   src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCimA1WCJnOViSudKzmrOUa3mua4aK7Dts"></script>

</head>
<body>

<!-- =================================THE CSS   ====================================== -->
<style>

#map_wrapper {
    height: 480px;
}

#map_canvas {
    width: 100%;
    height: 100%;
    overflow: visible !important;
}


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


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

	<div id="map_wrapper">
	    <div id="map_canvas" class="mapping"></div>
	</div>
	
	<div class="clear"></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>
<!-- ====================================== END MAP ====================================== -->	




<!-- ===================================  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 ?>);
    
    // Options for Map
    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
		}
    };
    
    // Map Container for single maps
    var map = new google.maps.Map(document.getElementById("map_canvas") ,  myOptions );
    
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(<?php  echo $latitude ?>, <?php echo $longitude ?>),
        map: map,
        //title: <?php echo $property_title; ?>,
        clickable: true
    });
    
    
    // on click action goes to function getDir()
    var infowindow = new google.maps.InfoWindow({
        content: "<strong><?php echo $prop_title; ?></strong><br><span style='color:#F67325;font-weight:bold;'>Get Directions:</span> <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() {
	// jQuery('#directionsPanel').css("display", "block") ;
	jQuery('#directionsPanel').addClass('expand_directions').show(2500) ;
	jQuery('#hide_map').show() ;
	
    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.";
        }
    });
}


function hideMap() {
	jQuery('#directionsPanel').hide() ;
	jQuery('#hide_map').hide() ;
}	
	
</script>

</body>
</html>
Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Google Directions from Map Marker
