Marker or image always on center

[aosmorac]

Hi, i need to put a image over the map in order to keep it always in the center at the map. Also i need to set a button over the map. How can i do that?

[wf9a5m75]

You can not put any images or buttons over the map, because the map places above the web view (HTML layer). I have been considering this feature request, but not find any better way.

[jskidd3]

@wf9a5m75 Could you please try and find a way to do this? I think it's a common feature that will be requested by many users. For example, in my application I need to be able to add a custom control that functions in its own way.

With the Google Maps JavaScript API I could do this simply by creating an absolute element, positioning it above the map canvas, and then adding an event handler to the element.

I think this is something that needs to be possible in the plugin, or at least a way to add custom controls.

I have a sidebar in my application and when I try to move the map-canvas div that the map is in it just stays still. Is there a way to get around this? If I want to move the map-canvas div around do I have to call setDiv() every single time? If this is the case it means that no movement can be animated in terms of moving the map around the page as you have to call the method every time.

Without this sort of functionality every app that uses the plugin is restricted to a single screen. Really we need the application to sit inside of the div so it can be moved around like you would expect.

[wf9a5m75]

@jskidd3
Execute map.refreshLayout() after moving the map-canvas div.

[jjhuff]

I'd like to see something similar. Ideally, I want a marker always positioned in the center of the map (i.e. what the Uber app does). Right now, I move the marker when the camera moves, but it feels odd since the marker doesn't move while the map is dragging.

What about doing something like:
http://stackoverflow.com/questions/8098874/how-to-display-fixed-postion-overlay-in-mapview

Thanks!

[wf9a5m75]

This is implemented in v1.2.0. V1.2.0 is going to release in September.

[wf9a5m75]

Please try the new version of the plugin.
This problem should be fixed. (I tested many times)
https://plus.google.com/112861993350247152906/posts/ber5LChbWkU

[gchokeen]

Is this documented, I am using plugin v1.2.5, but I unable to find how to implement this?

[rayanwipes]

Hey !
Is there a new way as of now to keep a marker fixed to the center of the map ?
Thank you,

[wf9a5m75]

Using the plugin v2, you should be able to do with this:

map.on(plugin.google.maps.event.CAMERA_MOVE, function(cameraPosition) {
  marker.setPosition(cameraPosition.target);
});

[rayanwipes]

Hey Masashi,
Thank you for your answer. This is how I do it now; however, there's a slight delay between the map moving and the marker staying in the center. This is what I'm looking to correct...

[wf9a5m75]

Or put an image in the map div.

<div id="map" style="position: relative">
    <img src="marker.img" style="position: absolute; left:50%;top:50%;" />
</div>

[rayanwipes]

Hello Masahi,

I have used your fix and it has been working perfectly. However, multiple users have alerted me about a problem. When elements are overlayed on top of the map, dragging those elements causes the map to scroll.

The detail of the bug can be found here :
https://forum.ionicframework.com/t/elements-on-top-of-google-map-scroll-bug/114692

Would anyone know if there's a way to prevent that from happening ?

Thank you very much.

[wf9a5m75]

How about this?

<div id="map" style="position: relative">
    <img id="centerMarker" src="marker.img" style="position: absolute; left:50%;top:50%;" />
</div>

var centerMarker = document.getElementById("centerMarker");
centerMarker.addEventListener("touchstart", function(e) {
  e.preventDefault();
});

[Muralilive]

Drag map while keeping marker at the center