CODEWITHSUNDEEP
javascriptgoogle-maps
Dale
Dale

Reputation: 1301

Google Maps API v3 Custom Button moving around

JSFiddle reproducing the issue.

I am adding a custom button to the top center of the map. I have a click event attached to the map that will fadeIn the button. A rightclick event on the map that will fadeOut the button.

To reproduce the issue:

  1. Right click on the map to fadeOut the button.
  2. Increase/decrease zoom level by at least one level.
  3. Left click to fadeIn the button.

At this point the button will fade back in at a location different than its original location.

  1. Increase/decrease zoom level by at least one level.

You will then see the button snap back to its original location.

var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: new google.maps.LatLng(41.508742, -0.120850),
    zoom: 7,
    disableDefaultUI: true
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);

  var btn = document.getElementById('myButton');
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(btn);

  map.addListener('click', function() {
    jQuery('#myButton').fadeIn();
  });

  map.addListener('rightclick', function() {
    jQuery('#myButton').fadeOut();
  });
.button {
  display: block;
}

#map {
  width: 300px;
  height: 300px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <body>
    <div id="map"></div>
    <button class="button" id="myButton">asdf</button>

    <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

  </body>
</html>

Upvotes: 0

Views: 528

Answers (1)

Preston
Preston

Reputation: 876

That looks like a potential bug with the control positions on the Map object. You may want to file a bug on Google's Public Issue Tracker.

As a workaround, you could try removing the button on the rightclick from the Map controls (with a slight timeout to let the fadeout effect complete), then readding it back to the map on the left click.

Simple sample JSBin

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps Custom Controls</title>
    <style>
    .button {
      display: block;
      width: 70px;
    }

    #map {
      width: 300px;
      height: 300px;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_KEY" async defer></script>
    <script>
    function initMap() {
      var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: new google.maps.LatLng(41.508742, -0.120850),
    gestureHandling: 'greedy',
    zoom: 7,
    disableDefaultUI: true
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);

  var btn = document.getElementById('myButton');
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(btn);

  map.addListener('click', function() {
      if (!jQuery('#myButton').is(":visible")) {
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(btn);
        jQuery('#myButton').fadeIn();
      }
  });

  map.addListener('rightclick', function() {
      if (jQuery('#myButton').is(":visible")) {
          jQuery('#myButton').fadeOut();
          setTimeout(function(){ map.controls[google.maps.ControlPosition.TOP_CENTER].pop(btn); }, 500)
      }
  });
    }
  </script>
  </head>
  <body>
    <div id="map"></div>
    <button class="button" id="myButton">asdf</button>
  </body>
</html>

Upvotes: 1

Related Questions