Member Avatar for wilko1995

Hi,

How would i make something like on google maps where you type in an address/location and it will show you how to get there, and give you directions.

I dont need a full code butwould like to knw what something like that is call/how to start off with it.

Thanks Matt Wilkinson

  • 3 Contributors
  • 3 Replies
  • 119 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by wilko1995

Dani AI

Generated

Short answer: you want routing/directions functionality provided by the Google Maps Platform — typically the Maps JavaScript API (client-side) using the DirectionsService/DirectionsRenderer, optionally paired with Places Autocomplete for the address box. Good starter material was suggested by ; ’s push to read the docs is useful too.

A minimal workflow to get from a text box to on-map directions:

  1. Create a Google Cloud project, enable billing, and enable the Maps JavaScript API plus Directions (and Places or Geocoding if you want address lookup). See how to get an API key here: Get an API key.
  2. Load the Maps JS with the Places library if you want autocomplete.
  3. Use Places Autocomplete (or Geocoding) to normalize user input to a place/address. See Places documentation.
  4. Use DirectionsService.route() to compute the route and DirectionsRenderer to draw it and populate a textual directions panel. The web Directions API is available if you prefer server-side requests: Directions API overview.

Example (client-side) pattern:

var ds = new google.maps.DirectionsService();
var dr = new google.maps.DirectionsRenderer();
dr.setMap(map);
dr.setPanel(document.getElementById('directionsPanel'));

ds.route({
  origin: originInput.value,
  destination: destinationInput.value,
  travelMode: google.maps.TravelMode.DRIVING
}, function(result, status) {
  if (status === 'OK') dr.setDirections(result);
  else console.error('Directions error:', status);
});

Tips and gotchas: enable the required APIs in Cloud Console and check console errors (REQUEST_DENIED, OVER_QUERY_LIMIT, ZERO_RESULTS, etc.). Restrict keys appropriately and be aware billing/quotas and pricing. If you need to hide a key or do bulk routing, call the web Directions API from your server and follow Google’s terms: Terms of Service.

Recommended Answers

All 3 Replies

Member Avatar for pritaeas

Something like this perhaps?

commented: useful post +5
Member Avatar for wilko1995

Thanks for the help. That's exactally what I need.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.