CODEWITHSUNDEEP
androidgoogle-mapscordovagoogle-maps-api-3
user835943
user835943

Reputation: 191

Android Phonegap: Google Map marker not immediately removed when marker.setMap(null) is called

When I remove a marker using marker.setMap(null), it remains visible until I zoom out at which point Google Maps removes it.

The marker is not visible after being removed on the same HTML page with Chrome on Windows.

It appears that the map is not being refreshed properly after the markers are removed.

Code with the issue (marker should disappear after 5s):

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
    <style type="text/css">
      * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          }
      html { height: 100%; }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQ7L1PL7pQzSuDfv9kTL_qE4Cp0wy8Oo8&sensor=true">
    </script>
    <script type="text/javascript">
      var theMap = null;
      function initialize() {
        var mapOptions = {
          zoom: 10,
          center: new google.maps.LatLng(37.7749295, -122.4194155),
          disableDefaultUI: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        theMap = new google.maps.Map(document.getElementById('map_canvas'),
                                      mapOptions);
        navigator.geolocation.getCurrentPosition(
          function (position) {
            // successfully load position
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            theMap.setCenter(new google.maps.LatLng(lat, long), 21);
          },
          function (fail) {
                console.error("Failed to load GPS coordinates");
          }
        );
        var marker;
        function addMarker(itemid, lat, lon) {
                marker = new google.maps.Marker({
                        position: new google.maps.LatLng(lat, lon),
                        map: theMap
                });
        }
        addMarker('pokemon', 37.42841, -122.16960);
        setTimeout(function() {marker.setMap(null);}, 5000);
      }


    </script>
  </head>
  <body onload="initialize();">
    <div id="map_canvas" style="width:100%; height:100%; top:0px; z-index: 10"/>
  </body>
</html>

Upvotes: 1

Views: 1524

Answers (1)

EnemyArea
EnemyArea

Reputation: 168

I think, it's the same issue like here: Google Maps API v3 in PhoneGap: markers not drawing properly after move

Try to set the optimized: false property to the marker:

new google.maps.Marker({
    map: map,
    optimized: false, 
    clickable: true
});

this should fix it!

Upvotes: 3

Related Questions