function addMarker(court) {
    let newMarker = new google.maps.Marker({
      position: { lat: court.lat, lng: court.lon },
      map: map,
      animation: google.maps.Animation.DROP,
      title: court.name
    });
    courtsMarkers.push(newMarker);
    newMarker.addListener('click', function() {
        new google.maps.InfoWindow({
          content: '<div style="font-weight:bold;">' + court.name +
            '</div><div style="font-style:italic;">' + court.location + '</div>'
        }).open(map, this);
    });

    if (court.numOfCourts.isPresent) {
      let location = new google.maps.LatLng(court.lat, court.lon);
      courtsMarkers.push(new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: location,
        radius: court.numOfCourts.value * 1000
      }));
    }
}
/**
 * Drops the markers so that the user can see them falling.
 * The pins indicate the location of the courts. You can also
 * click on them to get information about the name and address.
 * The circles indicate the number of courts (if the property is given).
 * Also, the radius of the circle is an indication of the number of courts.
 */
Drops the markers so that the user can see them falling.
The pins indicate the location of the courts. You can also
click on them to get information about the name and address.
The circles indicate the number of courts (if the property is given).
Also, the radius of the circle is an indication of the number of courts.
Drops the markers so that the user can see them falling . The pins indicate the location of the courts . You can also click on them to get information about the name and address . The circles indicate the number of courts ( if the property is given ) . Also the radius of the circle is an indication of the number of courts .
function addMarker(court) {
    let newMarker = new google.maps.Marker({
      position: { lat: court.lat, lng: court.lon },
      map: map,
      animation: google.maps.Animation.DROP,
      title: court.name
    });
    courtsMarkers.push(newMarker);
    newMarker.addListener('click', function() {
        new google.maps.InfoWindow({
          content: '<div style="font-weight:bold;">' + court.name +
            '</div><div style="font-style:italic;">' + court.location + '</div>'
        }).open(map, this);
    });
    if (court.numOfCourts.isPresent) {
      let location = new google.maps.LatLng(court.lat, court.lon);
      courtsMarkers.push(new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: location,
        radius: court.numOfCourts.value * 1000
      }));
    }
}
function addMarker ( court ) { let newMarker = new google . maps . Marker ( { position : { lat : court . lat , lng : court . lon } , map : map , animation : google . maps . Animation . DROP , title : court . name } ) ; courtsMarkers . push ( newMarker ) ; newMarker . addListener ( 'click' , function ( ) { new google . maps . InfoWindow ( { content : '<div style="font-weight:bold;">' + court . name + '</div><div style="font-style:italic;">' + court . location + '</div>' } ) . open ( map , this ) ; } ) ; if ( court . numOfCourts . isPresent ) { let location = new google . maps . LatLng ( court . lat , court . lon ) ; courtsMarkers . push ( new google . maps . Circle ( { strokeColor : '#FF0000' , strokeOpacity : 0.8 , strokeWeight : 2 , fillColor : '#FF0000' , fillOpacity : 0.35 , map : map , center : location , radius : court . numOfCourts . value * 1000 } ) ) ; } }
Drops the markers so that the user can see them falling.
Drops the markers so that the user can see them falling .