Arrows (Symbols)

by Lawrence Ross

HTML

<input id="searchBox" value="Nebraska"/>
<div id="geolocation"></div>
<div id="map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

function initMap() {
    const autocomplete = new google.maps.places.Autocomplete(document.getElementById('searchBox'));

    var x = document.getElementById("geolocation");

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Não foi possível obter sua localização atual. A versão atual do navegador é antiga ou a detecção de localização está desabilitada.";
    }

    function showPosition (position) {
        //Put on div the id geolocation the logitude and latitude
        x.innerHTML = position.coords.latitude + ", " + position.coords.longitude

        getDistance();
    }
}

function getDistance() {
    // Get what is written in the div with id geolocation and put in variable cdata
    // Giving alert in cdata correctly displays the user's current longitude and latitude
    var cdata = document.getElementById('geolocation').innerHTML;
    console.log(cdata);
    var coords = cdata.split(",");
    var origin1 = new google.maps.LatLng(coords[0], coords[1]); 
    var destination = new google.maps.LatLng(-25.494926, -49.294445);

    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
        {
            origins: [origin1],
            destinations: [destination],
            travelMode: 'DRIVING'
        }, callback);
}

function callback(response, status) {
    var x = document.getElementById("geolocation");
    alert(JSON.stringify(response));
}

$("#searchForm").keyup(function () {
    var search = $("#searchBox").val();
    $.post('includes/establishmentSearch.inc.php', {searchForm: search}, function(data){
        $('#searchResponse').html(data);
        if (search == '') {
            $("#searchResponse").empty();
            $(".groupSepare").show();
        } else {
            $(".groupSepare").hide();
        }
    });
});