Identify where I am and plot routes (Google Maps V3 with JS)

Asked

Viewed 2,465 times

0

I am trying to create a script in JS and HTML5. Need to solve the following problem:

The user opens the page and the map appears in a predefined place. Then he clicks on an input and enters its location, (the input is above the map), then he clicks on a search button, and at the same moment, a route is drawn from the point where it is, to the place that was already predefined previously. (ex: a company).

My code is like this:

var map;
var directionsService = new google.maps.DirectionsService();
var info = new google.maps.InfoWindow({maxWidth: 840});

var marker = new google.maps.Marker({
    title: 'AUAU MIAU PETSHOP',
    icon: 'marker.png',
    position: new google.maps.LatLng('-18.894756', '-48.263564')
});

function initialize() {
    var options = {
        zoom: 15,
        center: marker.position,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map($('#map_content')[0], options);

    marker.setMap(map);

    google.maps.event.addListener(marker, 'click', function() {
        info.setContent('Avenida Bias Fortes, 382 - Lourdes, Belo Horizonte - MG, 30170-010, Brasil');
        info.open(map, marker);
    }); 
}

$(document).ready(function() {
    $('#form_route').submit(function() {
        info.close();
        marker.setMap(null);

        var directionsDisplay = new google.maps.DirectionsRenderer();

        var request = {
            origin: $("#route_from").val(),
            destination: marker.position,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                directionsDisplay.setMap(map);
            }
        });

        return false;
    });
    
});
#map_content {
  height: 350px;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<form action="" method="post" id="form_route">
                                                    
  <label>Origem: 
    <input type="text" id="route_from" size="50" />
  </label>
  <input type="submit" value="Traçar rota" />
    
</form>
    
<div id="map_content"></div>

How can I adapt it to solve my problem?

  • 4

    In order for your question to have a better acceptance in Sopt, it is important that you show that you have tried to solve your problem. The ideal is for you to come here and expose specific problems. For example, if you had posted your code explaining exactly where an error occurred, what error message you received, what are the expected and obtained inputs/outputs, etc.

  • Thank you, I’ll make the corrections.

  • That input "Origin" (route_from) will be filled with the coordinates obtained by Geolocation, will be searched the address by the coordinates obtained by Geolocation, as it is, what will be the content of it? It can even be filled by the user or not, it is automatic?

  • Bruno, as I was not able to do for Geolocation identify without the user having to type I put it.... more can take... was just example

  • Geolocation Html5. User type address? Because browser geolocation sucks, you’ll end up sending the guy out of São Paulo or Curitiba or something like 90% of the time. If you are Mobile and use GPS, disregard it, but if you are Web, put an address bar and use the address to plot the route. I’m a devil’s advocate but it’s experience for you.

  • Got it. Funny because we forums that I visited the staff has spoken very well of Geolocation, but I agree with their point of view. But if you’re going to do it the way you mentioned, how can I adapt my code?

  • @Leonardoferreira Geolocation works well in the main browsers, so disregard IE =). I have some services that uses without problems, the accuracy depends on the provider and the type of network also, but never had problems. In case of using the input and the person inform the address you should use geocoding, google has service for this as well. I will already include an answer with normal Geolocation, simple thing, for you to have a note.

  • All right, I’m on hold, 'cause I’m already cracking my head here ahhha

Show 3 more comments
No answers

Browser other questions tagged

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