Is there any parameter I can add to a request such as the one in this function to display a name for an opened location, instead of showing the coordinates?
url(loc, label) {
const prefix = "https://www.google.com/maps/search/?api=1&query=";
url = prefix + `${loc.latitude},${loc.longitude}`;
return url;
}
For example this is possible in Apple Maps with the label in the function below:
url(loc, label) {
const latLng = `${loc.latitude},${loc.longitude}`;
return `maps:0,0?q=${latLng}(${label})`;
}
Maps URLs for Search only support two parameters; query and the optional query_place_id. There is no label parameter at this time. You can use query_place_id to show a textual name though, and Google specifically recommends this when querying lat/lng coordinates.
See this example: https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393&query_place_id=ChIJKxjxuaNqkFQR3CK6O1HNNqY
Android intents do support using a label parameter.
Hope this answers your question.
Related
I am trying to set the types in google places autocomplete and it's getting me crazy!
I want my users to be able to filter there search by typing the address or a establishment they are looking for, but for some reason it's not working properly.
Code I am using:
<script defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[my_api_key]"></script>
<script>
var searchInputStart = 'start_address';
start_address = new google.maps.places.Autocomplete((document.getElementById(searchInputStart)), {
types: ['geocode'],
types: ['address'],
types: ['establishment']
});
google.maps.event.addListener(start_address, 'place_changed', function () {
var place_start = start_address.getPlace();
document.getElementById('loc_lat_start').value = place_start.geometry.location.lat();
document.getElementById('loc_long_start').value = place_start.geometry.location.lng();
//get_directions to address
set_route();
});
</script>
If I take out --> types: [address] --> it shows the establishments correct, but not the addresses.
If I take out --> types: [establishement] --> it shows the addresses correct, but not the establishements.
How can my users filter places correctly from typing an address or establishment?
Can anyone help me please? What am I doing wrong?
Thank you.
According to Google Maps API documentation you can set only one type in place autocomplete options.
types Array<string>: The types of predictions to be returned. For a list of supported types, see the developer's guide. If nothing is specified, all types are returned. In general only a single type is allowed. The exception is that you can safely mix the 'geocode' and 'establishment' types, but note that this will have the same effect as specifying no types.
source: https://developers.google.com/maps/documentation/javascript/reference/places-widget#AutocompleteOptions
That means that you can use
start_address = new google.maps.places.Autocomplete(
document.getElementById(searchInputStart),
{
types: ['address']
}
);
or
start_address = new google.maps.places.Autocomplete(
document.getElementById(searchInputStart),
{
types: ['geocode', 'establishment']
}
);
but not all of them in the same options object.
I hope my answer clarifies your doubt.
When I pull up a Google Map, there is a little gear icon near the bottom-right that allows me to share. It includes finding an embeddable <iframe>. However, once I go into Streetview this gear icon disappears.
How can I embed the streetview version of the map?
It appears the problem is that the new google maps does not have a way to embed.
If you click on the in the bottom right corner while NOT in pano / street view mode you can revert to classic maps
Then you'll see
from there you can select embed frame.
When you're in the Streeview mode, click on the "link button" next to the print button. You'll have an iframe and a link to customize and preview it.
Since Google changed in the past two years I'll post an answer that shows how to embed Street View with the new Maps.
Enter in Street View Mode with the best view you want
Click those "three dots" on the top left corner of the screen
Click "Share or Embed Image"
Click on the tab "Embed Image" and copy/paste the code
of the iframe
its too simple .just go to link below https://developers.google.com/maps/documentation/javascript/examples/streetview-embed
copy the html+javascript code into your page and modify the div style (by default it goes full screen) having id= map-canvas
now go to the desired street view and copy the latitude,longitude in the url then replace in your code in initialize function latling(latitude,longitude) done!!!! happy to post my first answer stack overflow has answered me so many times
If you are looking for a more generic way, for example to display embedded streetview based on the regular google map link or coordinates. Here is my solution:
Extract coordinates from a regular link
export const getCoordinatesFromGoogleMapURL = (url: string) => {
if (!url) {
return undefined
}
const urlParts = url.split('/#')[1]?.split(',')
if (!(urlParts && urlParts?.length > 1)) {
return undefined
}
const gpsX = parseFloat(urlParts[0])
const gpsY = parseFloat(urlParts[1])
if (isNaN(gpsX) || isNaN(gpsY)) {
return undefined
}
return [gpsX, gpsY] as [number, number]
}
Generate embed url from coordinates:
export const generateGoogleMapEmbedUrl = (coordinates: [number, number]) => {
if (!coordinates) {
return undefined
}
const baseUrl = "https://www.google.com/maps/embed/v1/streetview"
const coordinatesString = `${String(coordinates[0])},${String(coordinates[1])}`
const url = `${baseUrl}?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&location=${coordinatesString}`
return url
}
Finally we can put it together:
export function convertToEmbedURL(url: string): string {
const coordinates = getCoordinatesFromGoogleMapURL(url)
const embedUrl = generateGoogleMapEmbedUrl(coordinates)
return embedUrl;
}
You can read the official docs to find out more about params etc: https://developers.google.com/maps/documentation/embed/embedding-map#streetview_mode
I have been making a script using a fusion table's layer in google maps.
I am using geocoder and get the coordinates of a point that I need.
I put a script that changes the style of a polygon from the fusion table when you click on it, using the google.maps.event.addListener(layer, "click", function(e) {});
I would like to use the same function that I call in the case of a click on the layer, but this time with a click with the coordinates that I got.
I have tried google.maps.event.trigger(map, 'click', {latLng: new google.maps.LatLng(42.701487,26.772308)});
As well as the example here > Google Fusion Table Double Click (dblClick)
I have tried changing map with layer...
I am sorry if my question is quite stupid, but I have tried many options.
P.S. I have seen many post about getting the info from the table, but I do not need that. I want to change the style of the KML element in the selected row, so I do not see it happening by a query.
Here is the model of my script:
function initialize()
{
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
layer = new google.maps.FusionTablesLayer({
suppressInfoWindows:true,
map : map,
query : {
select: 'Местоположение',
from: '12ZoroPjIfBR4J-XwM6Rex7LmfhzCDJc9_vyG5SM'
}
});
google.maps.event.addListener(layer, "click", function(e) {
SmeniStilRaionni(layer,e);
marker.setMap(null);
});
}
function SmeniStilRaionni(layer,e)
{
...
}
function showAddress(address)
{
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var point = results[0].geometry.location;
//IMITATE THE CLICK
}
});
}
In response to geocodezip
This way you hide all the other elements... I do not wish that. It is like if I want to change the border of the selected element. And I do not wish for a new layer.
In the function that I use now I push the style of the options of the layer and then set the option. I use the e from google.maps.event.addListener(layer, "click", function(e)); by inserting e.row['Name'].value inside the where rule.
I would like to ask you if there is any info on the e variable in google.maps.event.addListener(layer, "click", function(e));
I found out how to get the results I wanted:
For my query after I get the point I use this:
var queryText ="SELECT 'Районен съд','Окръжен съд','Апелативен съд','Местоположение' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'Местоположение\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.5));";
queryText = encodeURIComponent(queryText);
document.getElementById("vij query").innerHTML = queryText;
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
And then I get these results:
var rsyd = response.getDataTable().getValue(0,0);
var osyd = response.getDataTable().getValue(0,1);
var apsyd = response.getDataTable().getValue(0,2);
And then, I use the following:
where: "'Районен съд' = '"+rsyd+"'",
Which is the same as:
where: "'Районен съд' = '"+e.row['Районен съд'].value+"'",
in the click function.
This is a working solution for my problem.
But still, I cannot find a way to Imitate a Mouse click.
The issue is this: the data(row) for the layers will be requested via AJAX when you click on a layer.
In theory it's possible to select a geometry(polygon) by a given LatLng, the geometry-library has a method for this: google.maps.geometry.poly.containsLocation().
Unfortunately the FusionTableAPI does not support such queries(ST_CONTAINS), you cannot select a row by supplying a LatLng and selecting the rows where the geometry contains the LatLng.
So what you can do: create a copy of the table that contains the columns needed to select a row(Община...the distinct value, and Местоположение.... the geometry). This copy may be requested via AJAX, but when the FusionTable will not be modified anymore I would suggest to use a hardcoded copy.
What to do now when you want to simulate the click:
Iterate over all rows of the copy, use the mentioned containsLocation()-method to check if the geometry(Местоположение) contains the LatLng and when it does apply the query by using the value of the distinct column Община .
Of course it would take some time to check all the geometries, but the FusionTable is not very large, it should be a possible approach in your case.
Here is a demo: http://jsfiddle.net/doktormolle/sSwj3/
The size of the stored data is approximately 500kb, you should store the data in an external script, so they may be cached.
You may notice that the highligthning of the selected layer will be much faster when triggered via the links, because there will no data be requested via AJAX. When the highlightning of the selected feature is the only thing you need you may ommit the observation of the layer-click completely and observe the map-click instead. Use the returned LatLng to retrieve the selected row from the data and set the style:
Demo: http://jsfiddle.net/doktormolle/swdX8/
I am using a gmap autocomplete and sometimes the user doesn't hit any choice in the suggestion list. For example he types "Paris" in the input field and believes the search will be performed with Paris, however has the 'place_changed' of the gmap autcomplete was never called, the search cannot be perfomed.
How can I select by default the first choice of the suggestion list when the user doesn't make any choice ? I believe I could adapt the solution provided for the "enter issue" described here (Google maps Places API V3 autocomplete - select first option on enter) with a blur event handling, however this doesn't work.
Any hint ?
I think this is kind of defeating the purpose of the auto complete.
You could just retrieve the autocomplete predictions pro grammatically like so:
function initialize()
{
var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({ input: 'some address' }, callback);
}
function callback(predictions, status)
{
if (status != google.maps.places.PlacesServiceStatus.OK)
{
alert(status);
return;
}
// Take the first result
var result = predictions[0]
// do as you wish with the result
}
Hope that helps
I have a Knockout object mapped from a JSON object. A value of that knockout object is databound to an input element.
I have also bound a google places autocomplete to that same input element.
The value referenced by the knockout object tells me the value of what I have typed in (not selected, so it would be 'bar').
The value of the input box is the correct value (the location I have chosen, 'Barnet, United Kingdom').
Here is a JSFiddle that demonstrates the problem...
http://jsfiddle.net/twistedinferno/CPEMk/
Why do the two values differ and can I get the selected value as my bound value? (preferably without the need of another property on my KO object)
Updated JSFiddle here
This is normal behavior. Knockout registers its value bindings to events it is aware of such as afterkeypress or blur. It cannot 'detect' changes made by other frameworks such Google Places API by default. So, in order to work, you need to write some code that pushes events from the other framework to Knockout.
In this case, Google Places Autocomplete API supports a place_changed event. I've incorporated this event in my updated Fiddle to showcase a working example. See the Google documentation for more information about this event. The most important bit is:
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
koObj.StartDescription(place.formatted_address);
koObj.Name(place.name);
koObj.Address(place.formatted_address);
});
However, if you intend to use this functionality more than once, I strongly suggest you wrap this behavior in a custom Knockout binding.
Here's an excellent article about custom Knockout bindings. If you scroll all the way down to the last chapter, you will see an example of a Knockout binding that wraps around a third party control. You will want to do the same for Google Places Autocomplete, so you can handle three aspects of working with this control:
Initializing the control (with optional config options for the widget)
Responding to updates made in the UI by setting up an event handler. This is achieved by wrapping around the place_changed event.
Responding to updates made to the view model. This might not be necessary for your scenario.
Using a custom knockout binding will look something like this:
<input id="startDescription" type="text" data-bind="googleAutoComplete: StartDescription, googleAutoCompleteOptions: { componentRestrictions: { country: 'uk' } }" />
Good luck!
Here is a bare bones custom binding that I wrote for this in case anyone is searching for this:
ko.bindingHandlers.addressAutocomplete = {
init: function (element, valueAccessor, allBindingsAccessor) {
var value = valueAccessor(), allBindings = allBindingsAccessor();
var options = { types: ['geocode'] };
ko.utils.extend(options, allBindings.autocompleteOptions)
var autocomplete = new google.maps.places.Autocomplete(element, options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
result = autocomplete.getPlace();
value(result.formatted_address);
});
},
update: function (element, valueAccessor, allBindingsAccessor) {
ko.bindingHandlers.value.update(element, valueAccessor);
}
};
You can use it like this:
<input type="text" data-bind="addressAutocomplete: Address" />
Or if you want to specify options of the google places autocomplete ( eg. Limiting your search to one country):
<input type="text" data-bind="addressAutocomplete: Address, autocompleteOptions: { componentRestrictions: { country: 'au' } }" />
Hope it helps.
(Note. I have limited my autocomplete to the geocode type by default.)
also if you want to bind to specific components of the address see this gist https://gist.github.com/chadedrupt/5974524