4

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

//инициализация карты
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

1
  • дайте ссылку на ваш сайт, где можно увидеть проблему наяву
    – Alex
    27 окт 2015 в 9:31

1 ответ 1

2

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

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

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

2
  • Проверил карту по указанной вами ссылке в комментарии к моему ответу. Карта все же масштабируется со смещением к курсору мыши. Попробуйте перенести курсор к краю карту и приблизить ее. Посмотрите внимательнее. Однако ТС был прав, что иконка двигается. На работе глаз замылился, не заметил изначально.
    – VenZell
    27 окт 2015 в 18:10
  • @VenZell мы друг друга не поняли)) Я имел в виду, что маркер не двигается в стороны (по той ссылке) и на должен танцевать. Я думал вы об этом говорили. 27 окт 2015 в 18:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.