JavaScript from 4/17/24 Appery.io Webinar

*** MAP
google_map


*** INIT JS

var directionsDisplay;
var map;
var markers = [];
var directionsService = new google.maps.DirectionsService();
var bounds = new google.maps.LatLngBounds();
var trafficLayer = new google.maps.TrafficLayer();

function initialize() {
    console.log('Initializing...');

    map = Apperyio("google_map").gmap;
    if (!map) {
        setDelay();
    } else {
        directionsDisplay = new google.maps.DirectionsRenderer();
    }
}

function displayDirections(sourceAddress, destinationAddress, map) {
    var request = {
        origin: sourceAddress,
        destination: destinationAddress,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        directionsDisplay.setMap(map);
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            alert("Directions query unsuccessful. Response status: " + status);
        }
    });
}

function setDelay() {
    setTimeout(initialize, 50);
}

*** PAGE LOAD
initialize();

** ADD MARKER FROM GEOLOCATION

var markerLatLng = new google.maps.LatLng(localStorage.getItem('markerLat'), localStorage.getItem('markerLng'));

var marker = new google.maps.Marker({
    position: markerLatLng,
    map: map,
    title: 'My position',
    animation: google.maps.Animation.DROP
});

markers.push(marker);
bounds.extend(markerLatLng);
map.fitBounds(bounds);
map.setZoom(10);


*** TRAFFIC ON/OFF

trafficLayer.setMap(map);
Apperyio('nav_menu').panel('close');

trafficLayer.setMap(null);
Apperyio('nav_menu').panel('close');


*** CLEAR MAP
for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
}
directionsDisplay.setMap(null);
trafficLayer.setMap(null);
Apperyio('nav_menu').panel('close');


*** SHOW ROUTE

var sourceAddress = Apperyio("from").val();
var destinationAddress = Apperyio("to").val();
displayDirections(sourceAddress, destinationAddress, map);

*** ADD MARKER FROM REST SERVICE

var markerLatLng = new google.maps.LatLng(localStorage.getItem('markerLat'), localStorage.getItem('markerLng'));

var marker = new google.maps.Marker({
    position: markerLatLng,
    map: map,
    title: data.results[0].address_components[0].long_name,
    animation: google.maps.Animation.DROP
});

markers.push(marker);
bounds.extend(markerLatLng);
map.fitBounds(bounds);


*** MAPPING

JSON.stringify(value.Place, convertAddress);

function convertAddress(key, value)
{
    convert_address.execute({
        'data' : {
            'address' : value,
            'sensor' : false
        }
    });
}