maps

by Soviut

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true&amp;libraries=geometry,places&amp;key=AIzaSyB5nWByJ69AcEt2yw6IUCY8zq3M6PxHddg"></script>
<div id="map"></div>
<div id="details">
    <span class="name"></span> | 
    <span class="distance"></span>, 
    <span class="duration"></span> walking
<div>

CSS

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

#details {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 10;
    width; 200px;
    padding: 5px 10px;
    
    background: white;
}

JavaScript

// AIzaSyB5nWByJ69AcEt2yw6IUCY8zq3M6PxHddg
$(function() {
    var start = new google.maps.LatLng(43.6530550, -79.3908870);

    var mapOptions = {
        center: start,
        zoom: 14
    };
    var map = new google.maps.Map($('#map').get(0), mapOptions);

    //createMarker(map, start, "point");
    
    var spherical = google.maps.geometry.spherical;

    // meters
    var minDistance = 3000;
    var maxDistance = 3000;
    // random distance between min and max
    var distance = (Math.random() * (maxDistance - minDistance)) + minDistance;
    var heading = Math.random() * 360;
    // NOTE: computeOffset doesn't seem to return valid LatLng object
    var endTemp = spherical.computeOffset(start, distance, heading);
    var end = new google.maps.LatLng(endTemp.lat(), endTemp.lng());
    //createMarker(map, end, "point");

    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);

    // find a place near the end point
    var infowindow = new google.maps.InfoWindow();
    var placesService = new google.maps.places.PlacesService(map);

    var placesRadius = 200;
    var circle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: end,
        radius: placesRadius
    });
    
    var placesRequest = {
        location: end,
        radius: placesRadius,
        types: ['food']
    };
    placesService.nearbySearch(placesRequest, function(response, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            // randomly chose a place
            var place = response[Math.floor(Math.random() * response.length)];
            console.log(place);

            $('#details .name').text(place.name);
            
            // calculate directions
            var directionsRequest = {
  ...