<script>
    var gssMap, accessToken = '7fNWCXhqQ_OSyB4fd8C6539PYQ1G8YjdsOCoTtio';
    var markers = new Map();
    $(function(){
        var defaults = {
            zoomControl: true,
            zoom: 16
        };
        gssMap = new gssmaps.GSSMap(accessToken, 'map', defaults);
        var latLng = new gssmaps.GSSLatLng(33.666372,-117.685852);
        gssMap.setView(latLng);

        gssMap.on('contextmenu', function(e){
            var lat = e.latlng.lat;
            var lng = e.latlng.lng;
            var marker = addMarker(lat, lng);

            markers.set(marker.getMarkerId(), marker);
            getReverseGeocode(lat, lng, marker);
        });

        function getReverseGeocode(lat, lng, marker){
            var requestUrl = "https://apis.location.studio/geo/v2/reversegeocode/json?coordinate={lat},{lng}&api_key={access_token}";
            requestUrl = requestUrl.replace('{access_token}', accessToken).replace('{lat}', lat).replace('{lng}', lng);

            $.ajax({
                url: requestUrl,
                crossDomain: true,
                contentType: 'application/json',
                processData: false,
                success: function( data, textStatus, jQxhr ){
                    if(data && data.locations){
                        var locations = data.locations;
                        var str = JSON.stringify(data.locations, undefined, 4);
                        // console.log('Response: ' + str);

                        if(locations && locations.length > 0){
                            marker.bindPopupContent(prepareFormattedAddress(locations[0]));
                            marker.openPopup();
                        }

                    }

                },
                error: function( jqXhr, textStatus, errorThrown ){
                    console.log( errorThrown );
                }
            });
        }

        function prepareFormattedAddress(address){
            return address.formatted_address;
        }

        function addMarker(lat, lng, popupContent){
            var gssLatLng = new gssmaps.GSSLatLng(lat, lng);
            var gssMarker = new gssmaps.GSSMarker(gssLatLng);
            return gssMap.addMarker(gssMarker, popupContent);
        }
        function removeMarker(gssMarker){
            gssMap.removeMarker(gssMarker);
        }

    })

    function deleteMarker(markerId){
        marker = markers.get(markerId);
        markers.delete(markerId);
        gssMap.removeMarker(marker);
    }

</script>