I have several different cards. When I click on the link, I show the map with the given coordinates and put a marker on this place! But when I start to increase the zoom, the marker shifts!

 // initialize the card
 var mapModule = (function () {
     'use strict';

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

     return {
         // Add a marker
         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
             });
         },

         // Initialize the card
         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);
         }
     }
 } ());

 // Open a map with given coordinates
 $ ('. 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);
 });

What is the problem?

Update

There is no site, I do it locally!

JsFiddle example

//инициализация ΠΊΠ°Ρ€Ρ‚Ρ‹ 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,/x8FCx8JFyMNIycRLysVOy8ZRzMdUzchXzslazspdz8tg0Mxj0c1m0s5p089s1NBv1dFy1tJ11tN419R72NV+2daB2taE29eH3NiK3dmN3dqQ3tuT39yW4N2Z4d6c4t+f4+Ci5OGl5eKo5eOr5uSu5+Wx6Oa06ee36ui66+m97OrA7OvD7ezG7u3J7+7M8O/P8fDS8vHV8/HY9PLb9PPe9fTh9vXk9/bn+Pfq+fjt+vnw+/rz+/v2/Pz5/f38/v7///+1e+LrAAAAaXRSTlMAAQIEBQYHCAoLDA0OEBIdHyAiIyQlJiorLC4vMTQ2ODo8PT5AQUJDREZHSEpMTU5PUFJTVFZYWVpbXl9gYWJkZWZqa21vcXN2eHqMj5GTlZqcnqCjpaqsrre5vL7Fx9DU19ng7/Hy9P0k/Wr7AAAFqUlEQVR4AaTMQYqDMAAF0J/WUjrSYpkpboSABCGgonHjIiJ/5/1PNAewiUl8B3g4lL+rejRmJVdjxrp65zjn8atm7szq74FE2aelU/vJEO+pFnot6ok4r4YBmhfC3RUDqTsClZbBbIkQPwOjDDkOFZaRbAE/IZlACnhcNZPoK5yynon6GxxuE5NNjvXS8YTugi+E5ilaYE/Sb9voJ7FT/DNaxigMAkEU7VJ4AHMAC2vrBRG0ExHEKBYiKg475C65TEibsyUkMVHnr9nX7v8qf5Y/mtVp040TP5nGrknNOnFfHYWFcd4Sr6A2j7FWOZtAAyhLKmIAVQmUB+tYj1BUEBuYCmhYtctBocn0vEOP5qaWTYgqOSPehTJU24ueB8el5j/oEth+u8CXhzVbUEuf/91xkfxOtuIkjNG8DT2Zp2YrtMzV+xReKOZObAmJOxC+/wdc8baBZy63+5LrmTcMwuy+Hioa70F4/TwncYZxAN+7vTjj0aMe66lOZ+yhTg8648HqzZn24MHO9LsbQohokgWbhCRqu4YIFULKloIUjAGhWQg/9sf3byu7Ydnypi9+htNzeObd4Xm+7+5DhFK0zFCLXTMPER5eyMBg62+Lu/kTQjmmEdK82v/ulrixt/0EuLJgmo6YOOK5v9DrwJf83FxdmTS9JuZSdFC899TTgenr2WjaAPYcPhOOKmbWtUlT8V3xASInAwyb8P3B+OQHDPqGinkPxDdNRbkknv4xIlZbY9vwvWd6n2nArq4VMO+x2OGSclmo3PkZEae+zFBmh6+Bca3Ip8IG3BFaXFauCpX7iCyzjG3j3C7WaOq6fVJhRtf1BCL3hRZXletC5QdE1vlOf5V6PpspRtiKzvuj0OK6ckO6TcArBqyDJfgOzUjVbUi36oZyU6g8QUjNu14jaxilEXs6RJ0eQk+EFjeVW/OF76KeVXZT8C1lXTuFeWusYEaY1FuK8LlwF6EDVjXEX5aKKWDTPotjToUbmLkrfGIowtHvYWp53NGwO+REM4Y3PMR/JdyPiNwTmijfSpq+5TbSXm9n5bnJlqp27SWEtrKlGjOLmn4jefzWSMXpOJibEl9in1tYN3z7Hfry6oLH/1qIE0yNjpGcPnOcFbzgPjoMOO9Syb02ywv+qK8kI+XWofMAAedvbLBunFm6nh7b6yu/m5tagxn5SH0pGf5+C3GvDt8GD7HNiTKwx4PEgGR2xWnIh1+2pg0nhgZ3ACy13DUUmTNeBLG9WqCx2hvi2JavqRgo3+Pca2aRHHo1o2DxLWIDCwGT8T+ZwAcHdVcaKNLo06xREsk6ybNdoMzfEHjDrQwHx6yp/Y40+uQh/YvXXwdW9VVAK7KhIpDwWpoxtGvxHHOykP5iwXXyqzsuBLG52WV7GVN5Np8GYXMak10nCy++9D/0PlVOXHpHGkJqifz0cUzr2YKL7+IV/Qgzm/UunXYhjOmw2B9/yMYw9ejf2uxuJYEoigLwOoqiOeIPZlYUI6iEIiKCYFPSvvBiQLqRELwQSVB6/xcIFQnanp9x9nxPILLhrLXm0hN9w4L+/ieCHYv/xzox4LHHHY89Axw0DAHNige0exxkWZQM3aNkyKJkNoHQ29LH86/Y8VyySLwkUnnM5ezTcq57SzlDLiAuNF7Wd0hckLcX3oX2tHYLc+E1VfPZ8nI1X85cqjmK77oRYf3vv92vdSPCGxvobklrvtpsj794t92s5qa5g/HJLAzJzAenuhRLVyUwdqUTnOWYjNyAKDB1dtMwUD5dwVcwq0SfjyuwKgwpkmEBDlQjyiTfUHCTa5Ojdi7pzxx2xdaUjKatIqLL1Puk1a9ncKV8rTMhZtKp5RGPV32lP8FT1YOEO/YKCVAjOhspSCnRWQlyenTSgyDvFOE+PEhq0kETsbF5PchC1gMRPUJYakzjFKSVqQx5z3D2C8LKUP46Ah1SAAAAAElFTkSuQmCC', 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>

  • Give a link to your site where you can see the problem in reality - Alex

1 answer 1

You, as I understand it, the new google.maps.Point(84, 95) parameter of the marker is incorrect.

Necessary: new google.maps.Point(42,95) Ie anchor point in the middle-bottom of the image

pictures in base64 are furious))

  • I checked the card at the link you specified in the comment to my answer. The map does scale with offset to the mouse cursor. Try to move the cursor to the edge of the map and zoom in on it. Take a closer look. However, the vehicle was right that the icon was moving. At work eyes zamylilas, not initially noticed. - VenZell
  • @VenZell we did not understand each other)) I meant that the marker does not move to the sides (on that link) and should not dance. I thought you talked about it. - Alexey Shimansky