I'm developing a small app using Google Maps javascript API v3 where I need to display 2 markers and update their positions using ajax. I found no problem in doing it using Google Maps Markers, but I need a more customized marker so I'm using Google Maps custom overlays and I can't find the way to make the movements smooth.

This is the design of the markers (that also uses css animations, so I need custom html): Markers design The problem I have is that I can't find a way to actually move the custom overlay on the map. What I'm doing now is removing the overlay and creating a new one every time I have to move it, what makes a little blink and don't allow me to make a smooth transition from one position to the other.

So here are my questions:

1- Is using custom overlays the best way to build the markers according to the design? Is there any way to make Google Maps Markers look like the design?

2- If using custom overlays () is the best option, is there another way for moving them that is not removing and creating a new one?

Thanks in advance!

I'm developing a small app using Google Maps javascript API v3 where I need to display 2 markers and update their positions using ajax. I found no problem in doing it using Google Maps Markers, but I need a more customized marker so I'm using Google Maps custom overlays and I can't find the way to make the movements smooth.

This is the design of the markers (that also uses css animations, so I need custom html): Markers design The problem I have is that I can't find a way to actually move the custom overlay on the map. What I'm doing now is removing the overlay and creating a new one every time I have to move it, what makes a little blink and don't allow me to make a smooth transition from one position to the other.

So here are my questions:

1- Is using custom overlays the best way to build the markers according to the design? Is there any way to make Google Maps Markers look like the design?

2- If using custom overlays (https://developers.google./maps/documentation/javascript/customoverlays) is the best option, is there another way for moving them that is not removing and creating a new one?

Thanks in advance!

• javascript
• google-maps
• google-maps-api-3

1 Answer 1

After struggling with this some time (it really took me several hours) I have manage to do it getting inspired by this fiddle:

https://jsfiddle/doktormolle/QRuW8/

The functionality is not the same, but I could get some ideas.

Since there is not a lot of documentation I have created my own fiddle with a working (and simplified) example, just in case is useful for anyone:

https://jsfiddle/javigbas/3zx5xa2u/

:)