Last weeks I had a problem with google maps. The map is loaded partially so I search about this but i couldn't find a solution.
I put this code on the resize event as some people suggest but still the same problem occurs.
$(window).resize(function () {
google.maps.event.trigger(map, 'resize');
});
map is the variable where i store the map object.
Could someone give me a tip?
Thank you in advance.
Related
Sorry for my bad English!
I have spent more than a day for web search about this, but i have not found the solution yet. Please give me a suggestion.
I'm now working with google maps api. I've got a place autocomplete sample here: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
As the attached image, the place autocomplete feature works perfectly. When I enter the key word [Sydney distance education] --> click on the first suggestion --> the marker was moved to the specified place. I can get more detailed information from the marker variable.
This is the screen: http://www.imagesup.net/pt-1314056232011.png
When i click to the specified place on the map, it display a InfoWindow. I don't know which event should I need to listen to help me getting more detailed information of that place.
I have tried this
google.maps.event.addListener(map, 'click', function(event) {
alert('OK');
});
But the event is fired only when I click to another location which does not have viewport
I wonder if there is any plugin that lets me do this:
Click on the map, and auto generate the latitude and longitude. I have seen one somewhere, but don't know what library the site is using.
Click on the map, generate closest address. This I haven't seen before.
You can get the position with a simple click listener
google.maps.event.addListener(map, 'click', function(e) {
alert(e.latlng);
});
To get the closest address take a look at reverse Geocoding.
http://code.google.com/apis/maps/documentation/geocoding/#ReverseGeocoding
Edit: all of this is included in the basic google maps api :)
We have a report that shows where 2 markers are on a map, works great except when the markers are next to each other it zooms in to the highest level of zoom.
We want the min zoom to be open, but set the max zoom to a certain level. I have looked through the Google Static Map documentation, and cant see where to do it.
Does anyone know if this is possible using the static map api?
Cheers.
Google does not have that feature in place. Here is a feature request:
Issue 3909
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3909
Please vote!
Well it is sort of not straight forward to get it with static maps. You can omit specifying the zoom and hope google will choose what it thinks best.
Anyway this is how I got rid of it. I had my own zoom up / zoom down buttons to show up next to the map image. Upon click, I increase or decrease the current zoom value and reload the map image.
I know it's not pretty, but it gets the job done.
I have not tried that for static maps but it works for me in normal map:
google.maps.event.addListener($map, 'zoom_changed', function(){
if($map.getZoom()<4){$map.setZoom(4);}
if($map.getZoom()>14){$map.setZoom(14);}
});
Here I am limiting both max and min zoom.
Hope it helps
K
http://maps.google.com/staticmap?markers=-21.7164,35.4384&size=640x640&key=your-api-key&format=png8&maptype=roadY&zoom=8
Note the zoom querystring parameter
I found the following code from this URL:
http://code.google.com/apis/maps/documentation/javascript/events.html
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
});
Instead of adding listener, you could do document.onload(function() {
map.setZoom(8));
I have implemented a Google map by using the Google Maps Javascript API v3 Services. When the page loads, the map displays only in the top-left corner of its div container, that is, it displays only in one-forth of the div container, and the remainder is blank.
However, when I press F12 to inspect the code (with Firebug), suddenly the map will display completely.
What's going on here?
It happens often when you init the map and position of map's container changes.
Try to call after loading map and all messings up with DOM:
google.maps.event.trigger(map, 'resize');
You want to try the google ajax google loader. google.load("maps","2"). It's working for me because the loader makes the map work even when I'm switch fast between many other maps and do many travel-salesman-meta-heuristic on the map.
If hsz's solution doesn't work, it may be because the resize event needs to be triggered later. This code worked for me:
google.maps.event.addListenerOnce(map, 'idle', function () {
google.maps.event.trigger(map, 'resize');
});
Source: https://stackoverflow.com/a/17060345/12484 (credit: Ian Devlin)
I am trying to figure out how i can attach a click event to a google maps v3 compass.
I have created a function that re-draws markers on a map and want this to be fired when the user click on the compass (arrows top left) of the google map.
I am working with google maps v3 and cant seem to find any way of doing this through the documentation.
Does anyone know how to do this?
Thanks in advance!
Click event of the compass is probably attached to the bounds_change event. Essentially, you are changing the bounds of the map.
You can listen to the center of the map changing:
google.maps.event.addListener(map, 'center_changed', function() {
// Call your function to redraw markers here.
});