Почему все при увеличении масштаба карты, маркер сдвигается от заданных координат?

#javascript #google_maps_api #google_maps

У меня есть несколько разных карт. При нажатии на ссылку я показываю карту с заданными
координатами и ставлю маркер на это место! Но когда начинаю увеличивать зум, то маркер
смещается!


//инициализация карты
var mapModule = (function(){
    'use strict';

    var mapSection = $('#map')[0];

    return {
        // Добавим маркер
        addMarker: function(latitude, longitude, map){
            new google.maps.Marker({
                position: {
                    lat: latitude,
                    lng: longitude
                },
                icon: new google.maps.MarkerImage('/images/mapMarker.png',
                    new google.maps.Size(84,95),
                    new google.maps.Point(0,0),
                    new google.maps.Point(0,95)
                ),
                map: map
            });
        },

        // Инициализация карты
        initMap: function(latitude, longitude) {
            var mapPosition = new google.maps.LatLng(latitude, longitude),
                mapOptions = {
                    zoom: 14,
                    center: mapPosition,
                    scaleControl: false,
                    zoomControl: false,
                    streetViewControl: false,
                    mapTypeControl: false
                },

                map = new google.maps.Map(mapSection, mapOptions);

            mapModule.addMarker(latitude, longitude, map);
        }
    }
}());

// Открытие карты с заданными координатами
$('.showMap').on('click', function(event){
    event.preventDefault();

    $('.showMap').removeClass('act');
    $(this).addClass('act');

    var latitude = $(this).data('latitude'),
        longitude = $(this).data('longitude');

    mapModule.initMap(latitude, longitude);
});


В чем проблема?

Обновление

Сайта нет, делаю локально!

Пример на jsFiddle



//инициализация карты
var mapModule = (function() {
  'use strict';

  var mapSection = $('#map')[0];

  return {
    // Добавим маркер
    addMarker: function(latitude, longitude, map) {
      var marker = new google.maps.Marker({
        position: {
          lat: latitude,
          lng: longitude
        },
        icon: new google.maps.MarkerImage('data:image/png;base64,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',
          new google.maps.Size(84, 95),
          new google.maps.Point(0, 0),
          new google.maps.Point(84, 95)
        ),
        map: map
      });
    },

    // Инициализация карты
    initMap: function(latitude, longitude) {
      var mapPosition = new google.maps.LatLng(latitude, longitude),
        mapOptions = {
          zoom: 14,
          center: mapPosition,
          scaleControl: false,
          zoomControl: false,
          streetViewControl: false,
          mapTypeControl: false
        },

        map = new google.maps.Map(mapSection, mapOptions);

      mapModule.addMarker(latitude, longitude, map);
    }
  }
}());

mapModule.initMap(54.6199796, 39.790707);
#map {
  height: 400px;
}






    

Ответы

Ответ 1

У вас, на сколько я понял, параметр new google.maps.Point(84, 95) у маркера - неправильный.

Надо: new google.maps.Point(42,95)
Т.е. опорная точка в середине-внизу изображения

картинки в base64 бесят))