I have a table with 2 columns. In the first column I have a div that contains google_map and in the second column I have a panel that its width will change after a few second. I have a marker on the map.
Problem: When I click on a button it runs setCenter(); and set center of the marker with the last size of first column. I mean the marker is not at the center of map. but I want when I use setCenter(); it automatically put the marker at the middle of map with the new position.
Actually I want to use setCenter(); dynamically when the size of columns change.
google.maps.event.addListener(map,'click',function()
{
map.setCenter(center);
});
On click event you get MouseEvent as argument. See google docs for Map. MouseEvent has porperty latLng. So, you can use:
google.maps.event.addListener(map, 'click', function(event) {
map.panTo(event.latLng);
});
Check example at jsBin
Related
Hi I have a series of circles using mapquest and leaflet
The circle data is dynamically generated from querying the sql table that contacts: circle name, long / lat center position and radius.
I want the user to be able to click on any of the circles and the click event load the edit circle page that then loads another map page that only shows the single circle that was clicked on for editing rather than the collection of circles.
Loading the specific circle edit page etc is all sorted what i need to understand is what the syntax needed so i can click a circle and that loads the page editcircle.html?circleid=4
You can use the window.open method in a marker.on('click') event, as follows:
var marker = L.marker(L.latLng(p.lat, p.lon));
marker.on('click', function() {
//remove all markers
map.removeLayer(markers);
marker.addTo(map);
//open your edit page here
window.open(base_url + p.id);
});
markers.addLayer(marker);
I created a JSfiddle to show you what it does (https://jsfiddle.net/vaillant/yedg0hsd/). You used circles rather than marker, but that would be exactly the same procedure. I hope it helps.
I am using Google Maps API V3 for JavaScript, I do like to get a Marker's position relatively to my page in pixels (left, top), so I can add a custom label when hoving the mouse over my marker. How do I get that position?
If your referring to getting the position of your mouse while you hover, use overlay in the listener to get the projection and the pixel coordinates. Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map. If you want to place an image on a map, you can use a GroundOverlay object or you can create your own Custom Overlays with the use of OverlayView class.
Sample code using OverlayView:
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map); // 'map' is new google.maps.Map(...)
I'm creating marker and circle around 500 area. When user will be out of the boundary by drag the map another circle will create within same area of new generated marker. Issue is that its creating circle around previous generated marker instead of current generated marker.
You can check here:
http://jsbin.com/exiram/1
Can anyone help me please?
Pay atention with the events in tme map. for every pan "drag the map" you make a new marker in center of the map and a new circle for that marker.
probaly, you have a listener that capture all mouse events and call the code to make markers and circles.
you can make 2 buttons in your page, one to make a marker and other to make a circle.
Im a little bit busy to post a full answer so please excuse my psudo code
Somthing like this will work !
var map; // OUR MAP OBJECT
var circle; //OUR CIRCLE
var center; // lat long holder
google.maps.event.addListener(map, 'drag', function() {
center = getCenter();
circle.setCenter(center);
});
In the Google Maps API v3, how can I get the waypoint markers from the DirectionsRenderer in order to add click events to them (such as a delete menu).
Until a better solution can be found here is the work around that I have employed. The basic idea is to put your own marker on top of the waypoints and bind a click event listener to your marker. I have made a jsfiddle demonstrating the idea.
It definitely isn't perfect, but with a custom icon instead of the default marker it could look sort of natural.
Another way, which doesn't involve putting new markers on the map, would be to detect DOM click events on the map widget. The idea is simple. When a click is detected:
convert all waypoints' LatLng coordinates to coordinates on the screen (or, in fact, on the map widget) using MapCanvasProjection
calculate distances between waypoints and the point clicked. If user clicked close enough to any of the waypoints (the distance is lower than the radius of a waypoint icon) - display a menu for that point
I coded a complete solution in java for gwt. It should be pretty straightforward to get it translated into javascript.
Instead of creating a click event on a waypoint, you can create it on a marker, and assign it a high z-index so it overlays the waypoint.
Create the single markers and assign the a high z-index
marker = new google.maps.Marker({
map:map,
position: new google.maps.LatLng(1.99, 2.99),
});
marker.setZIndex(999);
Add a listener to the markers
google.maps.event.addListener(marker, 'click', function(event){
alert(marker.title);
});
And now create the waypoints.
is it possible to show hand cursor on mouseover KMLLayer in Google Maps 3?
I see the two solutions (but it seems that they cannot be used):
handle mouseover event for KMLLayer and change cursor in CSS
handle mouseover event for Map and check if cursor's location is contained by KMLLayer
Do you have any other ideas?
Thanks
The kml polygon cannot have a mouseover event so 1. is not possible.
As for second i really don't see an easy way out.
If you could change the format of the data to something else than kml things would be way better.
You can't have mouseover event, but you can set a click listener onto the layer, which will show the hand cursor.
var layer = new google.maps.KmlLayer('http://...');
google.maps.event.addListenerOnce(layer, 'click', function () {
// do nothing here
});
Now whenever you mouse over an area defined in the KML it will show the cursor. You can also obtain the location of the mouse (if the user clicks on the KML Layer) because that will generate a KmlMouseEvent which will contain the LatLng of the point they clicked. It will also tell you information about which KML Placemark they clicked. You can then do your calculations here to see if it's contained by the KML Layer you want...
From what I know you can enable/disable cursor pointer in google maps v3 over kml by the option clickable:
var kml = new google.maps.KmlLayer(
kmlUrl,
{
suppressInfoWindows: true,
preserveViewport: true,
map: null,
clickable: false
}
);