I know this is an old question that already has several answers, but I had this same problem and for me the issue was that I followed the example provided on console.developers.google.com and entered my domains in the format *.domain.tld/*. This didn’t work at all, and I tried adding all kinds of variations to this … Read more
Thanks to Giles Gardam for his answer, but it addresses only longitude and not latitude. A complete solution should calculate the zoom level needed for latitude and the zoom level needed for longitude, and then take the smaller (further out) of the two. Here is a function that uses both latitude and longitude: function getBoundsZoomLevel(bounds, … Read more
Google Maps is no longer free. You have to associate a credit card so that you can get billed if your site has requests that exceed the $200 credit they give you monthly for free. That is why you get the watermarked maps. For more information, see: https://cloud.google.com/maps-platform/pricing/ Update: A common problem with the new … Read more
This problem is usually due to the map div not being rendered before the javascript runs that needs to access it. You should put your initialization code inside an onload function or at the bottom of your HTML file, just before the tag, so the DOM is completely rendered before it executes (note that the … Read more
Edit: See Matt Diamond’s comment below. Got it! Try this: map.fitBounds(bounds); var listener = google.maps.event.addListener(map, “idle”, function() { if (map.getZoom() > 16) map.setZoom(16); google.maps.event.removeListener(listener); }); Modify to your needs.
You can try the country restriction function initialize() { var options = { types: [‘(cities)’], componentRestrictions: {country: “us”} }; var input = document.getElementById(‘searchTextField’); var autocomplete = new google.maps.places.Autocomplete(input, options); } More info: ISO 3166-1 alpha-2 can be used to restrict results to specific groups. Currently, you can use componentRestrictions to filter by country. The country … Read more
There’s an easier way, by extending an empty LatLngBounds rather than creating one explicitly from two points. (See this question for more details) Should look something like this, added to your code: //create empty LatLngBounds object var bounds = new google.maps.LatLngBounds(); var infowindow = new google.maps.InfoWindow(); for (i = 0; i < locations.length; i++) { … Read more
You can dynamically request icon images from the Google charts api with the urls: http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569 Which looks like this: the image is 21×34 pixels and the pin tip is at position (10, 34) And you’ll also want a separate shadow image (so that it doesn’t overlap nearby icons): http://chart.apis.google.com/chart?chst=d_map_pin_shadow Which looks like this: the image … Read more
From the picture you posted, it say it’s disabled… Go to the Developer Console Navigate to Google Maps -> APIs Search for Geocoding and click on Google Maps Geocoding API -> Enable API. Do the same thing for Geolocating
Yes, you can declare your new bounds object. var bounds = new google.maps.LatLngBounds(); Then for each marker, extend your bounds object: bounds.extend(myLatLng); map.fitBounds(bounds); API: google.maps.LatLngBounds