'how to search nearby website development company using google api
I want to list of all the nearby website development companies and I have used "website_designer" as the search keyword but it is not working. If I search for restaurant by using "restaurant" as the search keyword then itworks fine. If anybody knows the solution please help me. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var image_src = "images/";
var map; //
var infowindow;
var bounds = new google.maps.LatLngBounds();
var PlaceArray = ["website_designer"]; // search keyword
var PlaceCounter = 0;
function initialize() {
"use strict";
var pyrmont = new google.maps.LatLng(25.448677, 81.834382); //(latitude,longitude)
map = new google.maps.Map(document.getElementById('googleMapNearestPlaces'), {
center: pyrmont,
zoom: 14,
icon: 'images/map_marker.png',
scrollwheel: false,
rankby: 'distance',
styles: [{
"featureType": "all",
"elementType": "geometry",
"stylers": [{
"color": "#00c775"
}]
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"gamma": 0.01
},
{
"lightness": 20
}]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{
"saturation": -31
},
{
"lightness": -33
},
{
"weight": 2
},
{
"gamma": 0.8
}]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "administrative",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
},
{
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
},
{
"color": "#ffffff"
}]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"lightness": 30
},
{
"saturation": 30
}]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"saturation": 20
}]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"lightness": 20
},
{
"saturation": -20
}]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"lightness": 10
},
{
"saturation": -30
}]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"saturation": 25
},
{
"lightness": 25
}]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [{
"lightness": "0"
},
{
"visibility": "on"
},
{
"color": "#00c775"
},
{
"gamma": "1"
},
{
"weight": "1"
}]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}]
});
var marker = new google.maps.Marker({
position: pyrmont,
icon: 'images/map_marker.png'
});
marker.setMap(map);
var request = {
location: pyrmont,
radius: 5000,
types: ["website_designer"]
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
"use strict";
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
"use strict";
var place_icon;
place_icon = "images/map-icons/" + place.types['0'] + ".png";
var PlaceType = place.types['0'];
if (jQuery.inArray(PlaceType, PlaceArray) == -1) {
return;
}
PlaceArray = jQuery.grep(PlaceArray, function(value) {
return value = PlaceType;
});
var Distance = distance(place.geometry.location.lat(), place.geometry.location.lng());
//console.log(place.geometry.location.lat(),place.geometry.location.lng())
function distance(latitude2, longitude2) {
var lat1 = "25.448677";
var lon1 = "81.834382";
var lat2 = latitude2;
var lon2 = longitude2;
var radlat1 = Math.PI * lat1 / 180;
var radlat2 = Math.PI * lat2 / 180;
var radlon1 = Math.PI * lon1 / 180;
var radlon2 = Math.PI * lon2 / 180;
var theta = lon1 - lon2;
var radtheta = Math.PI * theta / 180;
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist);
dist = dist * 180 / Math.PI;
dist = dist * 60 * 1.1515;
dist = dist * 1.609344;
return Math.round(dist * 100) / 100;
}
jQuery("#near-by-place-detail").append("<ul><li class='left'><p><b>" + PlaceType.charAt(0).toUpperCase() + PlaceType.substr(1) + "</b></p><span>" + place.name + "</span></li><li class='right'><label>" + Distance + " Km</label></li></ul>");
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: place_icon,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
bounds.extend(marker.position);
//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);
//(optional) restore the zoom level after the map is done scaling
var listener = google.maps.event.addListener(map, "idle", function() {
map.setZoom(12);
google.maps.event.removeListener(listener);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
});
</script>
<section class="near_by_places">
<div class="container">
<h2>Near By Places</h2>
<div class="row">
<div id="near-by-place-detail" class="col-xs-12 col-sm-4 col-md-4"></div>
<div class="near-by-place-map col-xs-12 col-sm-8 col-md-8">
<div id="googleMapNearestPlaces" style="width:100%;height:100%;"></div>
</div>
</div>
</div>
</section>
Solution 1:[1]
Unfortunately there is no type related with the website development or the website designer. You can see all the supported types here.
https://developers.google.com/places/web-service/supported_types
You can use Text Search Requests instead as follow.
https://maps.googleapis.com/maps/api/place/textsearch/json?query=website_companies_in_newyork&key=[YOUR_API_KEY]
in the query you can specify any search query and Google will provide you a list of places.
You can either search for something like this as well.
query = shoe stores near New York
Read more about here https://developers.google.com/places/web-service/search
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |