$(document).ready(function () { var gogInterface = new IGoogleMapsService('map-canvas'); gogInterface.init(); gogInterface.setZoom(15); gogInterface.getServicesByKeyword('bar','5000'); gogInterface.getServicesByKeyword('drink', '5000'); gogInterface.getServicesByKeyword('cafe','5000'); gogInterface.getServicesByKeyword('empire', '5000'); gogInterface.getServicesByTypes(['food', 'cafe', 'bar'], '5000'); }); /* *Contains all configuration used by GoogleApiClass */ var configurations = { geolocationFailed: "Error: Geolocation failed.", geolocationNotSupported: "Error: Geolocation isn\'t supported", locationFound: "You are here", defaultLocation: new google.maps.LatLng(44.493587, 11.346584) //Bologna }; /** *This class allows you to find informations about places and services around you * *Samuele Resca **/ function IGoogleMapsService(destinationDivId) { /** *The object that contains the map **/ this.map = null; /** *ID of map destination div **/ this.destinationDiv = destinationDivId; /** *Obj that contains all information about services **/ this.service = null; /* *Obj that contains the information about infowindow */ this.infowindow = null; /* *Contains all configuration information */ this.config = configurations; /* *Array of new google.maps.Marker() Objects */ this.markerList = new Array(); /* *Used in asynchronous action */ self = this; /* *Initialize the map */ this.init = function () { //default zoom var mapOptions = { zoom: 6 }; //Init the map map = new google.maps.Map(document.getElementById(this.destinationDiv), mapOptions); if (navigator.geolocation) { //HTML 5 geolocation this.getPositionHTML5(); } else { //NO HTML 5 geolocation noGeolocation(false); } } /** *Handles browsers that not support geolocation **/ this.noGeolocation = function (errorFlag) { if (errorFlag) { var content = this.config.geolocationNotSupported; } else { var content = this.config.geolocationFailed; } var options = { map: map, position: self.config.defaultLocation, content: content }; this.infowindow = new google.maps.InfoWindow(options); map.setCenter(options.position); } /** *Get the current position and creates new info window **/ this.getPositionHTML5 = function () { navigator.geolocation.getCurrentPosition(function (position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); //Set the default position //var pos = self.config.defaultLocation this.infowindow = new google.maps.InfoWindow({ map: map, position: pos, content: self.config.locationFound }); map.setCenter(pos); }, function () { noGeolocation(true); }); }; /** *Set the zoom level **/ this.setZoom = function (zoomLevel) { map.setZoom(zoomLevel); }; /* *Add new google.maps.Marker in the markerList */ this.addMarker = function (marker) { for (i = 0; i < self.markerList.length; i++) { if (self.markerList[i].position.lat() == marker.position.lat() && self.markerList[i].position.lng() == marker.position.lng()) { return; } } self.markerList.push(marker); }; /* *Creates a marker in a specific latlng position and add it in the markerList */ this.createMarker = function (place) { var placeLoc = place.geometry.location; //new marker var marker = new google.maps.Marker({ map: map, position: place.geometry.location, }); self.addMarker(marker); //Add listener on click google.maps.event.addListener(marker, 'click', function () { infowindow.setContent(place.name); infowindow.open(map, this); }); } /* *Finds all information about a services using keywords *@keywordValue: search places using a keywords *@radiusValue: https://developers.google.com/maps/documentation/javascript/places#place_search_requests */ this.getServicesByKeyword = function (keywordValue, radiusValue) { navigator.geolocation.getCurrentPosition(function (position) { //get current position var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); //creates new request var request = { location: pos, radius:radiusValue, keyword: keywordValue }; self.getServices(request) }); } /* *Finds all information about a services using types *@typesValue: search places using a types : https://developers.google.com/places/supported_types *@radiusValue: https://developers.google.com/maps/documentation/javascript/places#place_search_requests */ this.getServicesByTypes = function (typesValue, radiusValue) { navigator.geolocation.getCurrentPosition(function (position) { //get current position var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); //creates new request var request = { location: pos, radius: radiusValue, types: typesValue }; self.getServices(request) }); } /* *Return services */ this.getServices = function (request) { //init the service object service = new google.maps.places.PlacesService(map); service.nearbySearch(request, callback); //Services callback: //set information using createMarker function function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { var place = results[i]; self.createMarker(results[i]); } } // alert(self.markerList.length); } }; };
<div id="map-canvas" style="height:400px"></div>