Making "how to arrive" with predefined destination

Asked

Viewed 561 times

-1

I need a page to click the iframe and that the user can put the address where they live, and when they click how to get it traces the route of a site that I will pre-set. That will be the location of the establishment.

How to do this?

OBS: I am developing in Wordpress.

Example: http://www.multimercados.com.br/lojas-multi-detalhe/multi-fernandes

google-maps

  • What you’ve already done?

  • I only have the page with the map. But I wanted to create this field for the user to put his address and he to trace the route to the destination. But I don’t know how to do it.

1 answer

0

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"
        async defer></script>
  </body>
</html>

Reference

  • But and how I would do for Wordpress?

  • Ai vc can search a plugin for google maps, there are several, for example in a quick search https://br.wordpress.org/plugins/wp-google-map-plugin/ but never used any. Test some and see which one meets your need.

Browser other questions tagged google-maps

You are not signed in. Login or sign up in order to post.