Develop Reference

Animate current location in Openlayers while the view follows

With openlayers I would like to make the current location visible and follow it with the view. The problem is that the current location updates from the device come in roughly every second and the resulting experience is not nice as the view jumps. This can be smoothed a little bit with a view animation, but then still the current location marker "jumps" on the map, like in this example.
I created an example where I put the current location in an animation (I used this example as base) and update the view directly in the animation. (btw: how can I avoid adding the helperMarker?)
This works but calling map.getView().setCenter while the animation seems wrong and I think this is the reason that sometimes the animation is not smooth and it slows down and stutters (reproducible in Chrome and Firefox).
I then implemented another way where I move the current location marker outside of the map into a div element and overlay the map at a fixed location and then I only need to animate the view and center it to the location of this div element. This seems to work but feels like a hack as the current location marker is no longer part of openlayers with potential problems regarding synchronization.
So, what is the proper way with Openlayers for a smooth "synchronizated" of the view and a current location marker?
(So probably something like this or this but for openlayers)

If you already have a view animation that follows the path you can simply draw the marker in the view center in a postrender handler.
vectorContext.drawGeometry(new Point(getCenter(map.getView().calculateExtent()))
I updated the example to keep the point in the view center during the animation (checkbox 'Smooth'):
https://codesandbox.io/s/track-position-vfdrx?file=/main.js
A postrender event on the vector layer only fires when at least one feature is drawn.
You can add the postrender event handler to the tile layer to avoid having a helper marker. (See my updated example above)

How can I reinit or clear google maps infowindow cache

I have created a nested carousel inside of a gmaps infowindow, the top level carousel keeps track of all of the nested slides. It works perfect on the first infowindow instance, but when I click another marker and when the next infowindow opens the count is based off of the previous infowindow..
is there a way to destory the last instance of the infowindow?

Fixed the issue, had to change the event listener to just addListenerOnce.

Google maps v3 info window opening outside map viewport

If a marker is clicked near the top of the map viewport, the infowindow loads outside the viewable area and the map must be dragged to see infowindow content.
Ideally I don't want the map to auto pan. Is there a way to load the infowindow in a different direction, e.g. if the marker is at the top of the viewport to display the infowindow in a downward direction.

No, you can't open google's default infowindows in a different direction since you don't implement your own infowindow class. But you can disable auto-pannnig simply passing TRUE to disableAutoPan property of InfoWindowOptions object like documentation said.

There is an example that used to be part of the Google Maps JavaScript API v3 Code Samples, that has moved over to GitHub, named: SmartInfoWindow. It does exactly what you are describing. Check into the underlying code and that should get you going in the right direction.

How to update the google map if the map canvas of it changed its dimenstions?

I have a google map inside of a div which gets changed, its parent div can get an additional class which changes its dimensions. This changes causes the google map not to get updated, it resist in the previous dimensions. How can I refresh the google map?
I tried to recreate the google map again but it seems to keep the other previously created google maps there as well. This causes sometimes strange behavior (the old map is on the top of the new). Can a google map be released?
Thanks for your help!

Check the google.maps.Map class reference, I think you're looking for the resize event:
Developers should trigger this event on the map when the div changes size:
google.maps.event.trigger(map, 'resize')

While re-sizing the existing map would be more elegant, as a workaround you can empty the container div before re-creating the map, e.g. while (div.firstChild) div.removeChild(div.firstChild) or $(div).empty().

Bing Map CSS position:fixed InfoBox issues

I have a map that is position:fixed on my page. So when I scroll down it stays with you on the page When I roll over the pinpoints on my map the InfoBox displays in the correct position, but when I click one of my results which triggers the Infobox to display it is relative to where the map was when the page loaded (so usually high up on the page and not down where I scrolled it). I am trying to manipulate where the info box displays using the ShowInfoBox, but it always needs LatLong Coordinates instead of pixel coordinates. Since the map moves up and down the page the pixel location could change depending on how far you scroll.
Right now I am just poitioning it with javascript after it loads but that is a less then ideal situation as I run into all sorts of problems.

It's probably a bug with Bing Maps that it doesn't position the infobox correctly. You'll have to work around it. The infobox most likely has a unique ID or a unique class that you could select. Using that you can manipulate the infobox once you set the new Lat/Long position.
When you display the infobox, after you call the show method with the Lat/Long you should then reposition the infobox using CSS based on the scroll positon. So, if the page has scrolled down 100 pixels you need to add 100 pixels to the "top" css property. The same goes for the "left" property. This should always result in your infobox appearing in the correct place.