POI Search Example
This sample uses the POI search service API to retrieve POIs and display them on the map with a custom icon.
Code review
<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>