When I click on a marker I don't want to center the map on the marker but move it to a bit to the left so I can display a window with some information on the right. I think it would be easier to use setCenter() but then I need a position next to the marker.
I guess i would have to do some calculations based on the markers latitude and longitude but I do not know how to proceed with this. Does anyone know how to calculate to a position based on a markers latitude and longitude? or is there another (easier) way?
Add an event listener to the marker.
Once marker is clicked, get marker position using getPosition(). To move the map to the left you want to center the map to a point to the right of the marker. So make a new set of coordinates with same lat and lng + 1 degree maybe.
Then you can use setCenter() or panTo() methods to move to the map in your desired direction.
Related
My map allows a user to draw circles around a clicked marker. To keep it in bounds of the furthest marker I need to know where that furthest marker is. How do I find the furthest marker from a clicked marker? But to complicate things I need to read the furthest marker title information to make sure it's the correct type of marker. It would have a special 3 letter code in the title to test if it's the correct marker to use. I can only check if it's there not what it says.
The simplest answer was to calculate the furthest distance in all directions at the get go. I did this by first finding a bounding box by calculating the:
$minLat = $rowCorners[minLat]-0.25;
$maxLat = $rowCorners[maxLat]+0.25;
$minLng = $rowCorners[minLng]+0.25;
$maxLng = $rowCorners[maxLng]-0.25;
In this case I gave myself a little room to work in, exact distance were not that critical. By using that information it was easy to draw the circles needed by the users.
enter image description here
I was wondering how to actually get the lat and lng and zoom values like in the picture example on mapbox style builder not with a mouse click or with a mouse move, just the entire map inside a div.
So explaining in detail, I was wondering if there was a way to grab the maps coordinates and display them based off of what mapbox does in there studio editor. They calculate the lat and lng and zoom level of their whole map and when a user scrolls around the map the lat and lng changes and it displays the new coordinates with the zoom level. I need to take those values and place them inside a textbox.
You have several samples on this.
how to get the coords of a point
how to create a draggable marker
how to get the coords of cursor
If you need the zoom too, you only need to add map.getZoom() to he methods that are painting the lngLat.lng and lngLat.lat
I have a list of google maps markers as html links next to a google map. I have the function that is triggered when I click on the link. Marker ID is passed to this function.
My question is - when I have 100 markers, I want somehow IDENTIFY the clicked marker on the map. Some sort of ripple effect that would go away from the marker.
please advice what are my possible options so I could develop appropriate solution
Example: 100 markers already on the map. I also have 100 names on the left. Each name corresponds to each marker. When I click the name, I want the marker that belongs to that name somehow "blink" or identify itself in some other way among other markers.
before the markers was pin on the map
you need to set a global markers variable
var gb.markers = [];
while you create each marker need to push into global marker array
marker = new google.maps.Marker({
// other stuff
'id': marker.id
});
after you done with assign function to marker, push it into global var
gb.markers.push(marker);
make sure when you click on marker will get marker id
and loop the global markers or make marker array with id as index
A ripple effect would be quite complicated, possibly involving positioning of a 'GroundOverlay' object centered around the marker you wish to highlight.
If your goal is just to be able to highlight the marker, perhaps playing a simple animation using 'Marker.setAnimation(animationObject)'. You could perhaps using 'Animation.BOUNCE' to highlight the marker?
I have a simple question, and hopefully there is a simple answer . . . I just can't find it after a couple of hours of searching.
I've got a standard google map with a bunch of markers. I have a click event on each marker so that when clicked, the map pans the marker to the center and zooms in on it. No issues there.
Now I want to change the event handler so that when a marker is clicked the map recenters so that the marker is centered horizontally, but it is vertically towards the top of the map canvas. Is there a relatively straight forward way of doing this that works across different zoom levels?
Thanks,
Chuck
There may be many ways, e.g.
google.maps.event.addListener(marker, 'click', function() {
this.getMap().setCenter(this.getPosition());
this.getMap().panBy(0,(this.getMap().getDiv().offsetHeight/2)+this.anchorPoint.y);
});
It puts the marker in the center and then pans the map vertically by (mapHeight/2-markerHeight)
You could also muck around with getProjection() and the fromContainerPixelToLatLon and fromLatLonToContainerPixel to set a specific position within the viewable point of the math.
Both of those will give you pixel measurements from the <div> element you're using as the map canvas.
c.f. fromDivPixel and ToDivPixel which will give you the pixel position of the item on the infinite div of the map. Say you've got your map focussed on Africa, right? And you've got a pin in NYC. Using the *DivPixel* variants will keep your pin in NYC, and then you can pan towards it. Using *ContainerPixel* will move your pin into view on the map regardless of whatever Lat/Lon you've set it to.
I am trying to create a location based search application. I need to display search results using marker. By using the Marker code sample from google map javascript API, the marker is displayed at the center of the map div. I need to point the marker at the bottom of the map so that i can show the search result above the marker.
Check this url http://www.groupon.com/now#/categories?address=denver&hint=47.5615%2C-52.7127&lat=39.7391536&lng=-104.9847034 . It shows marker to the bottom if the map. I need to disply like this.
Placing the marker doesn't force the map to center on it - the map itself is being set so its centerpoint is the same as the marker. You need to set the center of the map to be 'above' (in latitude) the center of the marker. use .setCenter(LatLng) on the map object.
Google map API has function to set the center point of view. If you don't provide it centers the marker lat/long you provide. You need to add/subtract lat/long accordingly to set center position. From this I mean you should take the current lat/long of the marker in separate variables, add/subtract values to adjust centre point and set the map center point with those.
Hope this help. :)
Based on the reply from Oliver (thanks), here is what i did to solve this issue.
In https://developers.google.com/maps/documentation/javascript/reference we see that we have to add map.setCenter({lat: -34, lng: 151}); - i have place it after this line var myLatlng = new google.maps.LatLng(your latitude, your longitude);
To get the values i have opened the google map and i clicked on my area, the pointer shows at the bottom of the page and i see the latitude and longitude (we need them for the line var myLatlng = new google.maps.LatLng(your latitude, your longitude); ).
Than i dragged the map down and clicked again in the middle of the map to see the latit. and longit. of that area and these two will be added in the line that you have to add - map.setCenter({lat: new latitude value, lng: new longitude value});