Place a draggable image above marker in google maps - javascript

Is there a way to do this? I've got markers placed on the map, but above it, I want to add an image, that looks exactly like the marker, that I can drag. I want to achieve effect that I drag the image to the defined place simultaneously the marker will still stay there so I'm actually operating with copy of this marker.
Thanks.

Related

Disable dragging of polyline while allowing other layer to drag in leaflet.js

I am creating map overlaying multiple png file using Leaflet.js.
I want to overlay polyline on top of these map disabling polyline to move.
The behavior I expect is following.
User can drag the map which is composed by png file. While map is being dragged, polyline doesn't move.
How can I achieve this behavior?
If you have a reference to the polyline
var polyline = L.polyline(...);
Then you can use
map.addLayer(polyline);//For show
map.removeLayer(polyline);// For hide
at the moment I think there is no native method to only hide/show, maybe in the 0.7 version
Other solution is to access to the object container, in a old commet from the maintainer
I don't think there's an easy solution, for tile layers at least. :( I'll try to handle this sooner.
For vectors, you can change path._container.style.display, and for markers - marker._image.style.display and marker._shadow.style.display.

Smooth update google maps overlay

My problem is I need to have a very custom marker to show the users location and I'm using this method to create. However my marker isn't stationary and I need to redraw it once user location changes.
Currently I've tried removing the overlay from the map using OverLayName.setMap(null); and removing the dom element with javascript, but both ways I get a flicking effect of the marker being removed from the map and added, which isn't smooth.
Is there a way to move the overlay on the map without it being removed and being drawn again ? Or maybe there is a way to create a smooth redraw visualization with css ?
Cheers guys.

Center of google map changes after placing markers

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.

Custom InfoWindow size/pointer position in Google Maps API

I have a map application that can be seen here:
http://chrismcaleenan.com/map/?page_id=25
Each of the Malaysian states in the application will have an InfoWindow that displays additional information. You can see an example of this by mousing over 'Kedah' either in the main data table on the right or on the state itself in the map.
The problem, as you can see, is that the map pans in order to position the InfoWindow. Is there a way to fix the map position and set the InfoWindow size or position so that it is fully displayed without panning? In the Kedah example, one could have the InfoWindow positioned directly to the right and/or use a shorter tail.
One option would be to create a custom graphic for each state, but I'd rather avoid this as I will be running into the same issue with add'l data (e.g. click Kedah to zoom - will have InfoWindows on all data points on zoom).
If you're playing around double-clicking the water will zoom back out and reset map.
Thanks!
Yes, and sometimes the pan pulls the mouse outside of the state, which causes the InfoWindow to disappear. I know that's not what you want. The Google Maps demo catalog includes a sample that I think will give you what you want for your map. It's named SmartInfoWindow. Take a look, click on some of the markers, check out how the SmartInfoWindow behaves, and see if that might help you achieve what you want. It's not perfect, but it keeps the pan at the absolute minimum.

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