I am working with Google Maps API V3. The following is my code to set-up for autocomplete:
var options = {
componentRestrictions: {country: elmts.rs_country.val()}
};
new google.maps.places.Autocomplete(start_address, options);
This works just fine. However, I need to dynamically change the country restriction.
How can I change the 'componentRestrictions' to another country?
Please see this Google maps api. You can use the method setComponentRestrictions
Related
When you visit maps.google.com there is an information at the right bottom corner saying when the image has been captured:
screenshot google maps
However on my site when I use Google Maps API, that information is simply not shown. I cannot find any setting for this either.
Does anyone know how to display that information?
EDIT:
I don't use google.maps.StreetViewPanorama, but google.maps.Map where the user can switch to StreetView mode.
Thanks!
When you create the Street View, specify the imageDateControl attribute in the options. It's disabled by default; you have to enable it.
Something like:
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: yourLocation,
imageDateControl: true
});
See:
https://developers.google.com/maps/documentation/javascript/3.exp/reference#StreetViewPanoramaOptions
I was able to set the options by getting the StreetView object from the map:
this.map = new google.maps.Map(this.divContainer, defaultMapOptions);
this.map.getStreetView().setOptions(defaultStreetViewOptions);
i've got this error message in the console. can anyone explain why? and the page is running as it should be.
js?key=MyAPIKey&v=3.exp&libraries=places,drawing,geometry:32 InvalidValueError: not an instance of HTMLInputElement_.ab # js?key=MyAPIKey&v=3.exp&libraries=places,drawing,geometry:32
InvalidValueError: not an instance of `HTMLInputElement`
That's mean you have not set proper id of your html input element.
Google API not able to find that control in your html code. Because of wrong id of input element.
If you using textarea then it will not work because google maps autocomplete now supports only window.HTMLInputElement(input tags)
For more details Please Check this Link
You can also find examples here of Google Map API
Add Google Api CDN after the callback function
eg.
function initMap() {
//
}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
I also got this error when i use google map autocomplete.
InvalidValueError: not an instance of `HTMLInputElement`
So i solve this as like .
var org = document.getElementById('origin');
new google.maps.places.Autocomplete(org, options);
I need to create link on google maps with marker + infowindow
I found this link:
url http://www.google.com/maps?q=41.0082,28.9784(INFO_WINDOW)
used to work before. But now it doesn't work anymore.
That is the "old"/"classic" Google Maps, it no longer works.
Some options:
Look at the embed API
Create a Google Maps Javascript API v3 map of your own that supports that functionality (example)
Can we get Google earth as a Map Type Id in api v3 ..
As this is done in Google maps also..
Check it out here
Can we do it ?
Here is the Google ticket requesting to add the "Earth" button to the map type control.
And a more recent (started last summer) issue specifically asking for MapsGL support. (The more stars this issues gets, clicking the start to the left of the issue title...the faster it gets resolved! So add your vote!)
See this question: Google Earth integrated with Google Maps API v3?
If you want to get the MapTypeId you can do it like:
var mapTypeId = myMap.getMapTypeId();
You can set MapType like:
myMapObject.setMapTypeId(google.maps.MapTypeId.SATELLITE);
On a project I'm building, I want the user to be able to select an address which is stored in the database, and then click on that address to view more information. When the user clicks on the link, it will take them to another page which will display more information, as well as a Map of the address.
What I want to do is get the map to locate the address dynamically, instead of using a pre-defined embed link. But I'm not entirely sure if what I want to do can be done, and if it can be done I don't know how to do it.
So essentially, I want to know how I can take the address from the database, and pass it to the embedded map on my project?
It doesn't really make a difference to me if Bing or Google is used.
Cheers!
Yes what you want can easily be done. Both Bing Maps and Google Maps offer geocoding services, where you give the service an address, and the services returns as part of its results longitude and latitude coordinate of the address on the map. I could paste a bunch of code here but you can find all the code sample you need for both maps in my links above.
When the user clicks on your address link, you bring them to your detailed information page. On that page, you will have javascript to set up your map. In addition to the javascript setting up your map, you will need more javascript, detailed in the links above, to call the geolocation services. In essences, you pass to the services the address you want to look up, and if the address is valid the service will return to you the longitude and latitude coordinates of that address. Using this information, you can then zoom to that location on the map, and optionally put a pushpin there to indicate the address.
See here for an example in google maps.
Interactive SDK of Bing Maps Click on REST Services -> Find a location by query.
I am assuming you are interested in the ajax version of the map controls, but the other versions should be quite similar and should work more or less the same.
You can always do something like this:
<div id="location"></div>
<script type="text/javascript">
function initialize() {
var gpLatlng = new google.maps.LatLng(latitude, longitude);
var gpOptions = {
zoom: 15,
center: gpLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("location"), gpOptions);
var marker = new google.maps.Marker({
position: gpLatlng,
map: map,
title:"Title"
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize®ion=GB";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>