<script>
  $(function(){
      var latLngRegex = /^-?([0-8]?[0-9]|90)\.[0-9]{1,6},-?((1?[0-7]?|[0-9]?)[0-9]|180)\.[0-9]{1,6}$/;
      var accessToken = '7fNWCXhqQ_OSyB4fd8C6539PYQ1G8YjdsOCoTtio';
      var gssMap = new gssmaps.GSSMap(accessToken, 'map');

      $('#submit').on('click', function(){
          gssMap.removeAllMarkers();
           if(!latLngRegex.test($('#lat').val() + "," + $('#lng').val())){
              $('#error_message').html('<div class="error_message">Please enter proper search center latitude and longitude.</font>');
              return false;
          }
          search();
      });

      function search(){
          var requestUrl = "https://apis.location.studio/geo/v2/search/json?search_center={lat},{lng}&query={query}&api_key={access_token}";

          requestUrl = requestUrl.replace('{access_token}', accessToken).replace('{lat}', $('#lat').val()).replace('{lng}', $('#lng').val()).replace('{query}',  $('#freeFormAddress').val());

          $.ajax({
              url: requestUrl,
              crossDomain: true,
              contentType: 'application/json',
              processData: false,
              success: function( data, textStatus, jQxhr ){

                 var str = JSON.stringify(data, undefined, 4);
                 $('#json_data').html(str);

                 if(data.places && data.places.length > 0){
                      showMarkers(data);
                 }

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

      function showMarkers(data){
          var gssLatLngs = new Array();
          var marker;

          $.each(data.places, function(index, place){
              var location = place.location;
              var placeName = place.name ? "<div class='name'>" + place.name + "</div>" : "";
              var category = place.categories && place.categories.length > 0 ?
              "<div class='name'>" + place.categories[0].name + "<div>": "";
              marker = addMarker(location.coordinate.latitude, location.coordinate.longitude, placeName + place.location.formatted_address + getFormattedUrl(place.enhanced_contents) + category);
              gssLatLngs.push(marker.getLatLng());
          });

          if(gssLatLngs && gssLatLngs.length == 1){
              gssMap.setView(gssLatLngs[0], 17);
          } else {
              gssMap.fitBounds(gssLatLngs);
          }
      }

      function getFormattedUrl(enhanced_contents){
          var url;

          if(enhanced_contents){
              url = enhanced_contents.business_url;
              url = url.match(/^http[s]?:\/\//) ? url : 'http://' + url;
          } else {
              return "";
          }

          return "<div> <a href='" + url +"' target='_blank'>More Details</a><div>";
      }

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