Google maps API - Form

0

Good morning, I'm a beginner in PHP and I have a little doubt. This code below that I've taken on YouTube maps a route between the address that is already filled in (Latitude, Longitude) and the address you provide from a form.

My question is how do I fill latitude and longitude with the data in a form.

Trace Route          

<style type="text/css">
    #map_content {
        height: 400px;
        margin: 10px 0;
    }
</style>

<script type="text/javascript">
    var map;
    var directionsService = new google.maps.DirectionsService();
    var info = new google.maps.InfoWindow({maxWidth: 200});

    var marker = new google.maps.Marker({
        title: 'Google Belo Horizonte',
        icon: 'marker.png',
        position: new google.maps.LatLng('-19.92965', '-43.94078')
    });

    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;
        });
    });
</script>

             Source:              

<div id="map_content"></div>

    
asked by anonymous 27.05.2018 / 17:41

0 answers