Google maps setCenter is not centering the map correctly

Question

In my Ionic/Angular mobile app, I have an Uber-like map, where basically the user can drag the map to select a location and there is a marker always pinned in the center.

To achieve that, I followed the instructions from here and here.

So, my HTML looks something like the following:

<ion-view cache-view="false" view-title="Choose location">
    <ion-content has-header="true" class="new-meeting" has-bouncing="false">
      <div id="chooseLocationMap" class="full-map"></div>
    </ion-content>
</ion-view>

The SASS related to that:

.full-map {
    width: 100%;
    height: 100%;

    .center-marker {
        position: absolute;
        background: url(../img/default-marker.svg) -10px -5px;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 40px;
        height: 50px;
        margin-top: -50px;
        margin-left: -22px;
        cursor: pointer;
    }
}

And finally, the part of my controller that deals with the map is this:

function initialize() {
    var initialPosition = loadStoredPosition();

    var mapOptions = {
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        disableDefaultUI: true
    };

    map = new google.maps.Map(document.getElementById('chooseLocationMap'), mapOptions);

    google.maps.event.addListener(map, 'center_changed', function () {
        updateStoredPosition(map.getCenter());
    });

    var markerDiv = document.createElement('div');
    markerDiv.className = 'center-marker';
    angular.element(map.getDiv()).append(markerDiv);
}

ionic.Platform.ready(initialize);

As you can see, I have the two methods, loadStoredPosition and updateStoredPosition, which are just retrieving and saving the latitude and longitude to a service.

This is working fine, I can move the map and every time the stored position will be updated correctly.

The problem is that when I leave the view (after selecting a location) and then return (position still remains the same as the last one), it looks like the marker is not pointing to the correct location but a bit further up (it's always the same offset).

Does anyone know why this might be happening?

EDIT:

The marker appears in the correct location the first time that I'm accessing the view. But all the consecutive times that I'm accessing the view, the marker is not pointing in the correct location anymore but a few pixels up. I should also mention that the view is not cached so the map is re-created every time.

Finally, one curious thing I noticed is that the very first time I access this view, the map after it's visible, it does a small bouncing and expands slightly!

You mention that the marker is always off by the same offset; do you have an approximate value for that? — DRobinson, Aug 23 '15 at 21:16
Just an idea: Possible error in the SASS ? `height: 50px; margin-top: -50px;` probably does not ensure proper centering. — petr, Aug 28 '15 at 08:24
I would probably set the marker position in the marker options see here http://stackoverflow.com/questions/5318795/google-maps-api-marker-image-positioning or if you leave the map try map.remove() and when you return call initialize again i had a similar issue with leaflet + tomtom 2 weeks ago this fixed the behavior another possiblity would be to set map bounds to always make sure that the mapcontainer is always the same — stackg91, Aug 28 '15 at 08:29
@stackg91 I couldn't find any remove() functions on map. So instead I tried destroying the div that holds the map, but didn't change anything! Regarding the other solution which is to add the marker as a MarkerImage, unfortunately I want it to always point at the center of the map, no matter how much you move the map (Uber-like map). — Alex Ntousias, Aug 29 '15 at 09:50

score 4 · Answer 1 · answered Aug 29 '15 at 15:33

ngmap recently added 'custom-marker' for this kind of purpose.

With custom-marker, you can have fully working marker with html. It also responds to all events click, mouseover using google maps API.

This is the example.

https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/custom-marker-2.html

And this is the code required, https://github.com/allenhwkim/angularjs-google-maps/blob/master/testapp/custom-marker-2.html.

As you see in the code, there is no Javascript required.

To center a marker, all the time, all you need to do is to add on-center-changed="centerCustomMarker()" to your map directive, and the following to your controller.

    $scope.centerCustomMarker = function() {
      $scope.map.customMarkers.foo.setPosition(this.getCenter());
    }

I try different approach than you asked, but it may worth a try.

GitHub: https://github.com/allenhwkim/angularjs-google-maps

FYI, I am the creator of ngmap.

I tried this approach but the problem is that the marker's position change is not very smooth. Ideally we want to have it always in the center...with your approach, when the user is moving the map, the marker is moving as well for a little bit until it's readjusted to the center. — Alex Ntousias, Sep 08 '15 at 07:41

Google maps setCenter is not centering the map correctly

1 Answers1