JSFiddle - React, Tailwind, and code Playground

by jean-philippe janecek

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>

CSS

#map {
    width: 450px;
    height: 400px;
}

JavaScript

var map;
var elevator;
var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(46.87916, -3.32910),
    mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);
var markers = [];

// Add a listener for idle event and call getElevation on a random set of marker in the bound
google.maps.event.addListener(map, 'idle', function () {
    // Create an ElevationService
    elevator = new google.maps.ElevationService();
    $.each(markers, function (key, value) {
        value.setMap(null);
    });
    // getting bounds of current location
    var boundBox = map.getBounds();
    var southWest = boundBox.getSouthWest();
    var northEast = boundBox.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    // adding 20 markers to the map at random locations
    var locations = [];
    for (var j = 0; j < 10; j++) {
        var location = new google.maps.LatLng(
        southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
        locations.push(location);
    }

    // Create a LocationElevationRequest object using the array's one value
    var positionalRequest = {
        'locations': locations
    };

    elevator.getElevationForLocations(positionalRequest, function (results, status) {
        if (status === google.maps.ElevationStatus.OK) {
            $.each(results, function (key, value) {
                if (value.elevation < 0) {
                    markers[key] = new google.maps.Marker({
                        position: value.location,
                        map: map,
                        icon: 'http://google-maps-icons.googlecode.com/files/sailboat-tourism.png'
                    });
                } else {
                    markers[key] = new google.maps.Marker({
                        position: value.location,
                        map: map,
                        icon:...