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!

Answer 1

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.