I have a list of people that I need to map. Some of them have geocoded addresses and others don't. So, I map the ones that I have, and then I geocode the ones that I don't have geocodes for, and I add them to the map one at a time. (side note: the google geocoder api has a limiter that allows you geocode 10 addresses the first second that you hit it, and then 1 per second every second after that). So, I as I am geocoding these addresses, I am creating Markers and adding them to the map. The problem here is that I can't effectively interact with the map from the UI while the other addresses are being geocoded, because each time I call marker.setMap(mymap) it re-zooms out to fit all markers. So, I can't interact with the map until they are all mapped. Is there any way to add a marker to the map without re-zooming out?
Geocoding and creating a marker doesn't automatically shift the center of the map. If you copied from the Maps API sample code, you may see a line like
map.setCenter(results[0].geometry.location);
That's causing the results to the center of the map. Comment out that line and see if there's still a problem.If you don't see setCenter, then look for a line with fitBounds() and comment that out. If you're still having trouble, post a live version of your code, or put it up on jsFiddle or something so we can debug it.
Related
More than one marker on same place problem.
I am using MarkerClusterer. When I have two or more markers on the exact same spot, The API only displays 1 marker - the top one. But somehow I want to show all the markers as each one will be opening distinct popup. I have searched found few solutions but none are seem to be working Anybody had similar issue and would plus share a solution?
As I am getting the same latitude and longitude from database for different markers, the markers are getting pin on each other, now I want to perform click event on makers alternatively, but only the top marker pin is clicked, how can I click the back one .
OverlappingMarkerSpiderfier is the solution: https://github.com/jawj/OverlappingMarkerSpiderfier
Ever noticed how, in Google Earth, marker pins that overlap each
other spring apart gracefully when you click them, so you can pick the
one you meant?
And ever noticed how, when using the Google Maps API, the same thing
doesn’t happen?
This code makes Google Maps API version 3 map markers behave in that
Google Earth way (minus the animation). Small numbers of markers (yes,
up to 8) spiderfy into a circle. Larger numbers fan out into a more
space-efficient spiral.
Demo page is here: http://jawj.github.io/OverlappingMarkerSpiderfier/demo.html
I'm want to call fitBounds() on a google map so that a user can see their own location relative to a selected marker/location.
Here is my function which handles this:
var fitMapToShowResult = function(index){
var hereLatLng = new google.maps.LatLng (lat,lng); //location of the user defined outside this func
var firstResultLatLng = new google.maps.LatLng(
$scope.searchResults[index].geometry.location.k,
$scope.searchResults[0].geometry.location.B
);
var latlngList = new Array( hereLatLng, firstResultLatLng ); // latlng: an array of instances of GLatLng
var latlngbounds = new google.maps.LatLngBounds();
for (var i=0;i<latlngList.length;i++){
latlngbounds.extend(latlngList[i]);
console.log('latlngbounds',latlngbounds);
}
//$scope.map.setCenter(latlngbounds.getCenter());
$scope.map.fitBounds(latlngbounds);
};
It works perfectly about 80% of the time. But roughly 1 in 5 times the marker is completely out of view and the zoom is way too high for the two points to ever be visible at the same time. What am I doing wrong?
It may be relevant that my map uses custom markers.
To assist with debugging, I added this code to draw the bounds on the map...
rect = new google.maps.Rectangle( {bounds: latlngbounds, map: $scope.map} );
It always looks perfect for the first couple results:
But often it's incorrect:
Notice that in each of the cases where it's incorrect, it appears that one of the dimensions of the rectangle (height/width) is correct, but the other is not. My gut tells me this is relevant.
Roundup of similar questions
I know this is a popular question, but I've reviewed all of the others and my issue does not seem to be a duplicate of any of them. Hopefully this stockpile will be useful to future troubleshooters, but none of these solved my issue.
google maps V3 fitBounds not accurate
Useless question with no code and no answers
Google Maps API v3 - fitBounds centers only one marker
User was re-defining the inside a loop without realizing it.
Using setZoom() after using fitBounds() with Google Maps API V3 &
Google Maps API V3 fitbounds() zooms out but never in &
Google Maps with fitBounds don't zoom
fitBounds() happens asyncronously so downstream actions need to be wrapped in eventListener.
google maps → fitBounds manually
User was passing incorrect type parameters to LatLngBounds (should be two google.maps.LatLngs)
google maps fitBounds() is broken or..? & Google maps API V3 method fitBounds()
Was constructing the google.maps.LatLngBounds with buggy coordinates (instead of leaving it empty and using .extend())
Trying to get Google Maps fitbounds to work
Super noob did not realize javascript methods were case sensitive
Google maps V3 custom marker images and fitBounds()
fitBounds() works as expected but user needed to allow more space for bug custom markers
Google Maps V3 fitBounds on visible markers
Simple question about how to use fitBounds()... rtfm
Google Maps API V3 - fitBounds randomly works but occasionally ignores bounds and loads in the middle of the ocean
No answers at time of writing. Sounds like invalid lat/lng pairs.
Don't use the values as geometry.location.**k**, it depends on minimized file (with some tool like MinifyJS) then it'll changes when google release a new versión.
MrUpsidown was right. My bounding box was wrong because I was referencing ....geometry.location.k directly instead of the LatLng object. Refactoring the code accordingly corrected the problem.
I have a geolocation map where the user can select a location from a dropdown, this then adds the location to the map as a marker. However I have just implemented code to update the geolocation of the person if they are moving, on this function update it refreshes the entire map and removes the marker of the location.
Is there a way around this whole map refresh, something like updating just the marker postion without refreshing the whole map or is it simply a case of grabbing the location before refresh then adding it back in afterwards?
This seems wasteful on resources though as it updates every 3 seconds.
Example Google Maps API code would be great as I don't currently have mine to hand to show as example.
Summary: I wish to be able to update the user position marker without refreshing the whole map div as this then removes any previously added markers.
Thanks
I think there is a lot of different way to prevent that. check out the google.maps.Map class and its methods in the API documentation.
What I'm trying to do is finding an elegant way of dealing with multiple markers on the exact same spot on a google map. Possible scenarios are when your geo data just isn't accurate enough to distinguish two markers from one another (say 3 people live in the same house and all you have is an address) or you only have city information of a couple of shops.
Now there is the Clusterer of course, everybody is saying that, but that won't help here as the markers have the exact same location. They will stay clustered regardless of zoom level.
I like the way Google Earth does it. Here is an example. But so far I have not discovered a way to have this behavior in Google Maps. I would be pleased if someone can show me how to do this.
So perhaps as you are looping through your coordinates adding all the markers, you could check if any previous marker has the same latlng. If it has you could use a different marker, e.g one numbered '2'. Or to do the Google Earth thing, offset each marker slightly, and draw a polyline from the markers to the original location.