I need a page where you load iframe from Google Maps and the user can put the address where he lives, and when he clicks how to get there he traces the route from a place I'm going to pre-define. That will be the location of the establishment.
How to do this?
NOTE: I'm developing on Wordpress.
Example: link
Here's an example from the google maps api page:
<!DOCTYPE html>
<html>
<head>
<!-- This stylesheet contains specific styles for displaying the map
on this page. Replace it with your own styles as described in the
documentation:
https://developers.google.com/maps/documentation/javascript/tutorial -->
<link rel="stylesheet" href="/maps/documentation/javascript/demos/demos.css">
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var chicago = {lat: 41.85, lng: -87.65};
var indianapolis = {lat: 39.79, lng: -86.14};
var map = new google.maps.Map(document.getElementById('map'), {
center: chicago,
scrollwheel: false,
zoom: 7
});
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map
});
// Set destination, origin and travel mode.
var request = {
destination: indianapolis,
origin: chicago,
travelMode: 'DRIVING'
};
// Pass the directions request to the directions service.
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == 'OK') {
// Display the route on the map.
directionsDisplay.setDirections(response);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"asyncdefer></script></body></html>Reference