IntroductionAPI
Search Points of Interest Widget
Search Points of Interest provides access to a massive “points of interest” database, and allows end users to find any business based on category. For example, search for hotels within a proximity (miles / km).
The points of interest search uses the current map view as the center point for the distance based search.
Places search is only avaialble for use with Google Maps Premium. This feature is disabled for use with other maps service providers.
Available categories with Google Maps Premium:
accounting
airport
amusement_park
aquarium
art_gallery
atm
bakery
bank
bar
beauty_salon
bicycle_store
book_store
bowling_alley
bus_station
cafe
campground
car_dealer
car_rental
car_repair
car_wash
casino
cemetery
church
city_hall
clothing_store
convenience_store
courthouse
dentist
department_store
doctor
electrician
electronics_store
embassy
establishment
finance
fire_station
florist
food
funeral_home
furniture_store
gas_station
general_contractor
grocery_or_supermarket
gym
hair_care
hardware_store
health
hindu_temple
home_goods_store
hospital
insurance_agency
jewelry_store
laundry
lawyer
library
liquor_store
local_government_office
locksmith
lodging
meal_delivery
meal_takeaway
mosque
movie_rental
movie_theater
moving_company
museum
night_club
painter
park
parking
pet_store
pharmacy
physiotherapist
place_of_worship
plumber
police
post_office
real_estate_agency
restaurant
roofing_contractor
rv_park
school
shoe_store
shopping_mall
spa
stadium
storage
store
subway_station
synagogue
taxi_stand
train_station
travel_agency
university
veterinary_care
zoo
API Details
Card Markup and CSS
<div>
<div class="com_cmapsanalytics_cardheader com_cmapsanalytics_card_innerbox">
<div class="com_cmapsanalytics_alignleft com_cmapsanalytics_card_title">
Show Places
</div>
</div>
<div style="margin-right: 5px;padding: 10px;">
<select id="selPlacesName" class="com_cmapsanalytics_sel_placesname" >
<option value="accounting">accounting</option>
<option value="airport">airport</option>
<option value="amusement_park">amusement_park</option>
<option value="aquarium">aquarium</option>
<option value="art_gallery">art_gallery</option>
<option value="atm">atm</option>
<option value="bakery">bakery</option>
<option value="bank">bank</option>
<option value="bar">bar</option>
<option value="beauty_salon">beauty_salon</option>
<option value="bicycle_store">bicycle_store</option>
<option value="book_store">book_store</option>
<option value="bowling_alley">bowling_alley</option>
<option value="bus_station">bus_station</option>
<option value="cafe">cafe</option>
<option value="campground">campground</option>
<option value="car_dealer">car_dealer</option>
<option value="car_rental">car_rental</option>
<option value="car_repair">car_repair</option>
<option value="car_wash">car_wash</option>
<option value="casino">casino</option>
<option value="cemetery">cemetery</option>
<option value="church">church</option>
<option value="city_hall">city_hall</option>
<option value="clothing_store">clothing_store</option>
<option value="convenience_store">convenience_store</option>
<option value="courthouse">courthouse</option>
<option value="dentist">dentist</option>
<option value="department_store">department_store</option>
<option value="doctor">doctor</option>
<option value="electrician">electrician</option>
<option value="electronics_store">electronics_store</option>
<option value="embassy">embassy</option>
<option value="establishment">establishment</option>
<option value="finance">finance</option>
<option value="fire_station">fire_station</option>
<option value="florist">florist</option>
<option value="food">food</option>
<option value="funeral_home">funeral_home</option>
<option value="furniture_store">furniture_store</option>
<option value="gas_station">gas_station</option>
<option value="general_contractor">general_contractor</option>
<option value="grocery_or_supermarket">grocery_or_supermarket</option>
<option value="gym">gym</option>
<option value="hair_care">hair_care</option>
<option value="hardware_store">hardware_store</option>
<option value="health">health</option>
<option value="hindu_temple">hindu_temple</option>
<option value="home_goods_store">home_goods_store</option>
<option value="hospital">hospital</option>
<option value="insurance_agency">insurance_agency</option>
<option value="jewelry_store">jewelry_store</option>
<option value="laundry">laundry</option>
<option value="lawyer">lawyer</option>
<option value="library">library</option>
<option value="liquor_store">liquor_store</option>
<option value="local_government_office">local_government_office</option>
<option value="locksmith">locksmith</option>
<option value="lodging">lodging</option>
<option value="meal_delivery">meal_delivery</option>
<option value="meal_takeaway">meal_takeaway</option>
<option value="mosque">mosque</option>
<option value="movie_rental">movie_rental</option>
<option value="movie_theater">movie_theater</option>
<option value="moving_company">moving_company</option>
<option value="museum">museum</option>
<option value="night_club">night_club</option>
<option value="painter">painter</option>
<option value="park">park</option>
<option value="parking">parking</option>
<option value="pet_store">pet_store</option>
<option value="pharmacy">pharmacy</option>
<option value="physiotherapist">physiotherapist</option>
<option value="place_of_worship">place_of_worship</option>
<option value="plumber">plumber</option>
<option value="police">police</option>
<option value="post_office">post_office</option>
<option value="real_estate_agency">real_estate_agency</option>
<option value="restaurant">restaurant</option>
<option value="roofing_contractor">roofing_contractor</option>
<option value="rv_park">rv_park</option>
<option value="school">school</option>
<option value="shoe_store">shoe_store</option>
<option value="shopping_mall">shopping_mall</option>
<option value="spa">spa</option>
<option value="stadium">stadium</option>
<option value="storage">storage</option>
<option value="store">store</option>
<option value="subway_station">subway_station</option>
<option value="synagogue">synagogue</option>
<option value="taxi_stand">taxi_stand</option>
<option value="train_station">train_station</option>
<option value="travel_agency">travel_agency</option>
<option value="university">university</option>
<option value="veterinary_care">veterinary_care</option>
<option value="zoo">zoo</option>
</select>
<p/>
<label>Within Miles</label>
<br/>
<select id="selPlacesRadius" class="com_cmapsanalytics_sel_placesradius">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
<p/>
<label>Marker Sizing</label>
<br/>
<div class="com_cmapsanalytics_horiznav">
<ul>
<li><a id="btnStandardSizing" class="active">Standard</a></li>
<li><a id="btnByRatingsSizing">Based on Rating</a></li>
</ul>
</div>
<p/>
<div class="com_cmapsanalytics_actionheaderlinks">
<a id="btnShowPlaces">Show Places</a> |
<a id="btnClearPlaces">Clear</a>
</div>
<p/>
<div>*uses the current map center as the search radius center</div>
</div>
</div>
<style>
.com_cmapsanalytics_sel_placesradius, .com_cmapsanalytics_sel_placesname{
width: 100%;
border-radius: 4px;
height: 25px;
}
</style>
JavaScript
(function(){
createNamespaceUnderCentigon("ui.SearchPlacesCard");
centigon.ui.SearchPlacesCard = function(){
centigon.ui.Card.call(this);
this.contentUrl = this.getCardAssetUrl() + "SearchPlacesCardMarkup.txt";
this._sizeIconsBy = "standard";
this._placesLayerIx = -1;
this.controlIdToRandomId = {
selPlacesName: this._domUtil.getRandomDivId(),
selPlacesRadius: this._domUtil.getRandomDivId(),
btnShowPlaces: this._domUtil.getRandomDivId(),
btnClearPlaces: this._domUtil.getRandomDivId(),
btnByRatingsSizing: this._domUtil.getRandomDivId(),
btnStandardSizing: this._domUtil.getRandomDivId()
};
}
centigon.ui.SearchPlacesCard.constructor = centigon.ui.Card;
centigon.ui.SearchPlacesCard.prototype = new centigon.ui.Card();
centigon.ui.SearchPlacesCard.prototype.getHtml = function(gotHtml){
this.getRemoteContent({url: this.contentUrl, success: gotHtml});
}
centigon.ui.SearchPlacesCard.prototype.addEventListeners = function(){
var that = this;
this.domObjByRandField("btnShowPlaces").click(function(){
that.togglePlacesLayer(true);
});
this.domObjByRandField("btnClearPlaces").click(function(){
that.togglePlacesLayer(false);
});
var btnOpts = [{id: this.controlIdToRandomId["btnStandardSizing"]},
{id: this.controlIdToRandomId["btnByRatingsSizing"]}];
var toggleListMenu = new centigon.ui.ToggleListMenu(btnOpts);
this.domObjByRandField("btnStandardSizing").click(function(){
that._sizeIconsBy = "standard";
});
this.domObjByRandField("btnByRatingsSizing").click(function(){
that._sizeIconsBy = "ratings";
});
}
centigon.ui.SearchPlacesCard.prototype.togglePlacesLayer = function(visible){
if(visible){
var searchTerm = this.domObjByRandField("selPlacesName").val();
if(this._placesLayerIx === -1){
this._placesLayerIx = this.cMap.locations().length;
}
var placesMarkerSizing = this._sizeIconsBy;
var layersDynamicSizeEnabledFlags = this.cMap.layersDynamicSizeEnabled();
if(placesMarkerSizing === "ratings"){
layersDynamicSizeEnabledFlags[this._placesLayerIx] = true;
}
else{
layersDynamicSizeEnabledFlags[this._placesLayerIx] = false;
}
this.cMap.layersDynamicSizeEnabled(layersDynamicSizeEnabledFlags);
var overlayTypes = this.cMap.overlayTypes();
var names = this.cMap.layerNames();
var locs = this.cMap.locations();
var lbls = this.cMap.labels();
var vals = this.cMap.values();
overlayTypes[this._placesLayerIx] = centigon.mapping.Layer.TYPE.PLACES;
names[this._placesLayerIx] = "Places Search";
locs[this._placesLayerIx] = [this.cMap.currentMapCenterLatitude() + "," + this.cMap.currentMapCenterLongitude()];
lbls[this._placesLayerIx] = [this.domObjByRandField("selPlacesName").val()];
var mtrsPerMi = 1609.34;
var maxMtrs = 50000;
var rad = Math.min(Number(this.domObjByRandField("selPlacesRadius").val() * mtrsPerMi), maxMtrs);
vals[this._placesLayerIx] = [rad];
this.cMap.overlayTypes(overlayTypes);
this.cMap.layerNames(names);
this.cMap.labels(lbls);
this.cMap.values(vals);
this.cMap.locations(locs);
var that = this;
var numZoomTries = 0;
var maxNumZoomTries = 50;
var tryZoomToLyr = function(){
numZoomTries++;
if(numZoomTries === maxNumZoomTries){
clearInterval(zmIntrvl);
}
var lyr = that.cMap.getLayerAt(that._placesLayerIx)
if(lyr && lyr.getLocations().length > 0){
that.cMap.setMapViewportBasedOnLocations(lyr.getLocations());
clearInterval(zmIntrvl);
}
}
var zmIntrvl = setInterval(tryZoomToLyr ,200);
}
else{
if(this._placesLayerIx > -1){
this.cMap.removeLayer(this._placesLayerIx);
}
}
}
})()