I am currently integrating Google Maps Javascript API. I would like for the user to be able to type an address and have a "google street view" map generated for him. Preferrably, this street view map should be looking "inside" the office building. Example:
I am searching for "Zar Restaurant & Bar, Rosenheimer Straße, Munich, Germany" in Google Maps (link: https://www.google.bg/maps/place/Zar+Restaurant+%26+Bar/#48.1141096,11.6115833,17z/data=!3m1!4b1!4m5!3m4!1s0x479ddf9443819fc1:0xb242780e5bdc5ce5!8m2!3d48.114106!4d11.613772?hl=en). One business is found, and if you click on the image in the side panel, you are shown a 3d-view inside the restaurant.
Alternatively, if a Google organic search is made with the same keywords, the business listing is displayed on the right and there is a button saying "see inside" that gets you there. I would like to achieve such a 3d-view map (showing the inside view) embedded on the site, as shown here: http://www.zar-bar.de/galerie.php . I am sure that this can be easily achieved by embeding the iframe google generates for you, but i would like NOT to use this method.
Question: How to get the same 3d view inside the business through Google Maps Javascript API?
I know that the same map can be displayed by the JS API when you enter the lat & lng. I managed to find the needed lat & lng from this tool of theirs: https://developers.google.com/maps/documentation/embed/start. From here, i saw the lat & lng from the params in the iframe src just below the imag . Then i placed the coordinates in google maps js api and it worked. Working code:
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var position = {lat: 48.1141, lng: 11.6138};
var map = new google.maps.Map(document.getElementById('someDiv'), {
center: position,
zoom: 14
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('someDiv'), {
position: position,
pov: {
heading: 240,
pitch: 10
}
});
map.setStreetView(panorama);
}
JS Fiddle: https://jsfiddle.net/cdfnvrj0/3/. This lead me to believe that i need to get the lat & lng from a an address.
What i have tried:
Requesting Google Maps geocode API to get lat & lng from an address with the following request URL:
"https://maps.googleapis.com/maps/api/geocode/json?address=Zar%20Restaurant%20Bar,%20Rosenheimer%20Stra%C3%9Fe,%20Munich,%20Germany%20&key=AIzaSyBLASrj4k7gOpG62kdBWwGrGyHnfM71FT4"
This API finds the address and returns some geolocation data, but when i place these coordinates in my google maps JS api, the displayed position is not exactly the same. It places me somewhere on the street, not a 3d view of the searched business. This leads me to believe that this API returns geolocation based on the address as it is, and not an address of a business, i.e does not work for businesses. So, how does one figure out if there is a Google My Business address corresponding to a given address (through an API), and if there is such a business, how can i find out if it has an "inside view", and how can i take it's lat&lng to place it on a map? Is this currently possible with Google APIs?
I would be very thankful of all feedback and suggestions. Thank you for your time.
The geocoder is for postal addresses. To find a "place" (like "Zar Restaurant Bar"), use the Places API
Places API result for "Zar Restaurant Bar, Rosenheimer Straße, Munich, Germany":
Rosenheimer Str. 240, 81669 München, Germany (48.114106, 11.61377200000004)
Geocoder API result for "Zar Restaurant Bar, Rosenheimer Straße, Munich, Germany":
Rosenheimer Str., München, Germany (48.1232636, 11.602944500000035) ["GEOMETRIC_CENTER"/"partial_match"]
Related
I'm using Google Maps Javascript Web API. I'm looking to get the current location (GPS coordinates) of the view. Meaning, if I drag the map all the way to England, the function would return the GPS coordinates of the view's center (which would be somewhere in England).
How can it be accomplished? Is there a certain function I can use?
Try getCenter():
let map = new google.maps.Map(document.getElementById('map'), { ... }),
currentLocation = map.getCenter();
Demo
I've been searching for this quite a bit and cannot seem to find it anywhere online.
The background story: I am making a .NET windows forms C# application and I have a couple of listbox items that I want to have the following functionality:
When I click on the listbox item I want the map to go to that location with a pin attached to these longitude and latitude coordinates.Also I would like a certain zoom. I would be very thankful is someone could give some information if this is possible.
It would be great if there would exist functions that do this.
Also I want to add a new function to add a new location, that when I add a pin to the map I get the longitude and latitude coordinates back somehow.
I understand events and all that btw, I just don't know how to use any possible functions, that google maps provides for .NET framework.
Google maps API is browser API (javascript) as #Mr. J pointed out.
There are third party API's that can be used
https://github.com/ericnewton76/gmaps-api-net
GoogleSigned.AssignAllServices(new GoogleSigned(gmapsApiKey));
var map = new StaticMapRequest();
map.Center = new Location("1600 Amphitheatre Parkway Mountain View, CA 94043");
map.Size = new System.Drawing.Size(imgGoogleResult.Width, imgGoogleResult.Height);
map.Zoom = 14;
map.Sensor = false;
Uri imgURI = map.ToUri();
imgGoogleResult.ImageLocation = imgURI.AbsoluteUri;
I'm using MapBox to plot points of interest that is submitted through a user generated form built on rails. Currently the user enters a address, then the address has it's Lat and Lng calculated through a gem (geocoder). There from I pass the data from rails to javascript via the gon gem, run a forEach loop on all the points of interest, and then plot on the map using the lat and lng.
Now I want to get driving directions between the points of interest, a to b to c, etc. MapBox has a directions section, but the directions are based on the click event on the map, not stored input. Been wrestling with this for a while, and google hasn't been fruitful.
Links and advice on how to get directions between my plotted points using MapBox is hugely appreciated.
Cheers.
When using the Mapbox directions API you can supply your own waypoints, a semicolon separated list of coordinates.
http://api.tiles.mapbox.com/v4/directions/{profile}/{waypoints}.json?access_token=<your access token>
Waypoints should minimaly consist of two coordinates, your start and destination coordinates. This API should do exactly what you want. More information about on the Mapbox direction API can be found here
I don't know mapBox. But notice: it is the browser that tells you your location; it's not Google Mpas, mapBox or ...
<script type="text/javascript">
function initialize(position, accuracy) {
alert(
'Lat: ' + position.lat + ' - Lng' + position.lng + ' - accuracy: ' + accuracy + 'm'
);
//// example for Google Maps
// var latlng = new google.maps.LatLng(position.lat, position.lng);
// ...
}
// request is succesful
function locationFound(position) {
initialize(
{lat: position.coords.latitude, lng: position.coords.longitude},
position.coords.accuracy
);
}
function locationNotFound() {
alert('Not able to find your location');
}
function page_loaded() {
// the page is loaded, we can send a request to search for the location of the user
navigator.geolocation.getCurrentPosition(locationFound, locationNotFound);
}
</script>
<body onload="page_loaded()">
<div id="map-canvas"></div>
</body>
I've got a real trouble trying to start my web app because of wrong adress returns from Google Geocoder when passing LatLng values to it.
http://jsfiddle.net/3kUx7/
geocoder.geocode({'latLng': latLong}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results) {
The main problem is that coordinates pair 50.393386951159684,30.612979531288147
returns the wrong address "улица Заречная, 9А"
The same pair tested in new and old google maps and even regular google search returns correct address "Днепровская наб., 26Г, Киев, город Киев 02000"
The code i use for reverse geocode is the same as in jsfiddle.
That area was newly built (5-7 years ago :) ) adn google has some wrong building on a regular map but address almost correct.
Reverse Geocoding Test App
http://reverse-geocoding.appspot.com/
gives the SAME WRONG RESULT but showing 2014 copyright!
I just don't understant what am i doing wrong. Or google has different DBs for online maps and JS API. if so GOOGLE PLEASE SYNCRONIZE! The world had changed for past 5 years!
I am facing a weird issue with Google Maps Geocoding API v3. It works fine for all other addresses that i have tried so far but it's giving me an issue with the following address.
35 & 36, Rajiv Gandhi Infotech Park, Pune, 411057, India
OR
Plot No 35/36,Rajiv Gandhi Infotech Park,Phase 1,MIDC,Hinjawadi,Pune,411057,India
Even for: Rajiv Gandhi Infotech Park, Pune, 411057, India
The GeocoderStatus is ZERO_RESULTS.
Below is the code snippet.
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address' : address
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
....
}
else{...}
However, the same address is returning a valid lat/long with 'OK' status in json result at the below link.
http://maps.googleapis.com/maps/api/geocode/json?address=35&36+Rajiv+Gandhi+Infotech+Park,+Pune,+411057,+India&sensor=true
Can anyone please tell me what is the cause of this issue and its resolution?
Perhaps that particular address is recently added to Google's database.
Why do the Google Maps APIs Geocoders provide different locations than Google Maps?
The API geocoder and Google Maps geocoder sometimes use different data sets (depending on the country). The API geocoder occasionally gets updated with new data, so you can expect to see results changing or improving over time.
taken from: http://code.google.com/apis/maps/faq.html#geocoder_differences