My Problem: My scenario is that in my app I have a inputfield, where you can search for addresses which uses autocomplete. In this field you can type in any company name and it will find the lat/long and set the marker on the map below the input. Then the user can also drag and drop the marker somewhere using the map, and here comes the problem, as I cant get the company name this way, which is needed in my requirements. My failed attempts are below.
Finding company name by lat/lon: I need to get companyname based on a position (lat/long).
So what I tried is geocode the lat/lon to get the place id: https://maps.googleapis.com/maps/api/geocode/json?latlng=55.93366899999999,12.258698299999992&key=xxx
It gives me place_id: "ChIJwSWuIGRAUkYRf7LPSwRStYU"
Then I use that to get place name: https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJwSWuIGRAUkYRf7LPSwRStYU&key=xxx
But no place name! The JSON does not contain anything about the business.
Finding company name by address: So i tried to geocode address instead of lat/long: https://maps.googleapis.com/maps/api/geocode/json?address=Sigrunsvej%2040%20Hillerød
This gives me place id: ChIJa1mGSGFAUkYR2SpylJRKlLM https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJa1mGSGFAUkYR2SpylJRKlLM&key=xxx
After throwing that into places, the place is the same as before without company name..
Finding company name by "company name": But when I try to give the company name in the url, I get a 3rd place id: https://maps.googleapis.com/maps/api/geocode/json?address=Bauhaus%20Hillerød
Place id: ChIJZWxjtmZAUkYRWY4K-RTjwsk https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJZWxjtmZAUkYRWY4K-RTjwsk&key=xxx
This place id works, and I get the company name "BAUHAUS".
Question: So how do I get the company name without knowing it already? It also seems crazy to me that one place can have different place ids.
Use nearbySearch on the location.
var service = new google.maps.places.PlacesService(map);
var radius = 100;
service.nearbySearch({
location: new google.maps.LatLng(55.93366899999999, 12.258698299999992),
radius: radius,
type: "store"
}, callback);
Returns one result:
BAUHAUS Hillerød
placeId:ChIJZWxjtmZAUkYRWY4K-RTjwsk
(Note: without the type:"store"
, I get a different result)
code snippet:
var infowindow;
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(55.93366899999999, 12.258698299999992),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
var radius = 100;
var circle = new google.maps.Circle({
map: map,
center: map.getCenter(),
radius: radius
});
map.fitBounds(circle.getBounds());
service.nearbySearch({
location: map.getCenter(),
radius: radius,
type: "store"
}, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(results.length + " results");
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
} else console.log("status=" + status);
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name + "<br>placeId:" + place.place_id);
infowindow.open(map, this);
});
google.maps.event.trigger(marker, 'click');
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>