Center of google map changes after placing markers - javascript

I am initializing a google map using a GeoLocation service to set the initial latlng. The map is draggable, and dragging changes the center of the map.
I can place markers from a DB successfully, however doing so always changes the center of the map back to the original latlng (from geolocation).
I would like to be able to drag the map (changing the center), then place the markers, but leave the center of the map at the location to which it was dragged.
I'm not sure why running the function to place the markers (even when there are no markers in the DB to place!) always causes the map center to revert to when it was first initialized...
Any help much appreciated!

I think you can use setCenter function to change the center after setting up the marker. Something might be resetting the center when you are setting up marker (which is difficult to say without seeing your code), but you can always set the center manually.
setCenter(latlng:LatLng|LatLngLiteral)
You can use MarkerOptions to set marker to which you can provide Map. While providing the map, just set center of this map.

Related

Zoom map out to contain the given map bounds

I have a google map app and the user is able to perform a marker search.
The search has the current mapBounds so that I can search only in the current view. However, if I don't have any results in the current view - I'm trying to do a search within 100km of the center of the map.
If I find location within 100km I want to zoom out the map in order to show the locations I've found.
On the server I go through all my locations and get the sw and ne points. So basically in my ajax response I can directly create latLngBounds (no need to loop through the markers locations and extend the bounds).
The issue is whenever I try to do map.fitBounds(mynewbounds); nothing happens. The map stays as it is.
It seems that since the center of the map is the center of the new bounds, the map doesn't want to move. If I do map.pantobounds then the map moves to the northwest corner of the bounds.
The behavior of pantoBounds is expected according to the documentation:
https://developers.google.com/maps/documentation/javascript/reference
If the bounds is larger than the map, the map will be shifted to include the northwest corner of the bounds
Any ideas how to make the map zoom out in order to contain the new bounds?
Okay, I just figured out what is going on. Right before I set the boundaries I was trying to remove my zoom_out and dragend events. Unfortunately I opted in for using the clearListeners event, which was removing all events set on the map (even the one that are not set by me). So it seems that fitBounds issues are zoom_changed event, but the map was not responding to it, as all listeners were removed.
Once I removed the correct events by using removeListener(listenerInstance) the fitBounds function started to behave as expected.
So just as a warning to everyone else! Don't use clearListeners if you don't know what you are doing. It removes all events assigned to the map object which can lead to nasty behavior!

how to load markers if their location is what is displayed on screen using Google maps api or gmaps.js

i have a bunch of markers that i want to add to a map dynamically.
I am getting this markers from a database as a json object and placing them on the map, when the map loads
The map i have is in a div 300px x 300px.
The issue i'm trying to solve is that i only want to load the markers that are on the visible part of the map.
I know the lat and long of each marker so the question is how do i find the area that is displayed on the screen, and maybe the lat and long ranges.
If i pan the map i want the are to update so i can show more markers...
not sure if this makes sense :)
any ideas on this issue ?
observe the bounds_changed-event of the map. When it fires , you may use the contains-method of the bounds of the map(returned by mapInstance.getBounds() ) to filter the markers .

automatic panning google map

I have a marker on google map v3, indicating a position of a vehicle. The marker moves, indicating the movement of the vehicle. How can I automatically pan the map, when marker tries to go out of the visible part of the map?
You can use the getBounds function of the map to query for the boundaries. If your point is moving outside the boundaries, you can simply call setCenter to update your map.

How to displace markers at the same position in google maps?

How can I add a listener to google maps so that When it already has marker at say position x,y then another marker when added to the map to the same location will displace both the new and old markers in the vicinity of x,y so that they dont overlap.
also for e.g. there are 2 markers close but not overlapping, we add a third marker overlapping on of them, then we displace all three to form an equilateral triangle.
I ran into this issue also, Diodeus is correct that if you want to actually move one of the markers locations you would have to keep a store of your markers and as you are getting ready to plot check if that specific lat lng has already been plotted, if so at that point you would adjust the lat lng. The problem I ran into was that then one of your markers is in an incorrect location and/or it is still not viewable depending on the degree of zoom in correlation to the displacement that you add to your lat/lng.
I would recommend looking into marker clustering personally. This seems to be the route to go in these situations if you don't want to have a marker on your map with the incorrect location and still want the end user to be able to know that their are multiple markers on the same location.
Hope this helps.

Google Maps Marker Click Event Bubbling

I have a marker on a Google Map using the v3 Javascript API that is beneath another marker. When I click on the topmost marker, I would like to have the click event bubble up (down?) to the bottom-most marker with the goal of providing an optional menu for the user to choose which marker they meant to click.
Is this possible with the google.maps.event.addListener for click events?
Can I query the map for all markers that are contained by a given location, apart from hacking it myself?
As far as I know there isn't a builtin way to cycle through the markers on the click event. You can control the zIndex of each marker via the MarkerOptions which will override the default stacking based on vertical position:
All markers are displayed on the map
in order of their zIndex, with higher
values displaying in front of markers
with lower values. By default, markers
are displayed according to their
vertical position on screen, with
lower markers appearing in front of
markers further up the screen.
It think you will have to code this up yourself. I would love to hear how that goes.

Categories