Google map marker disappears

Question

I have an issue with my map marker. When you load the map the first time, everything works fine. However when the div is hidden and re-shown (and calling the same function map()), the map loads fine but the marker doesn't come up, even though the map is centered in the position where I truly am.

Here is a snippet of the map coding:

function map(){ 
  var latlng = new google.maps.LatLng(38.54, 15.35);
  infowindow = new google.maps.InfoWindow();

  var mapOptions = {
zoom: 5,
center: latlng,
panControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
};

  map = new google.maps.Map(document.getElementById("map"), mapOptions);    
  switch (map_view_id) {
case "1" :  map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
            break;
case "2" :  map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
            break;
case "3" :  map.setMapTypeId(google.maps.MapTypeId.HYBRID);
            break;
  } 

  google.maps.event.addListenerOnce(map, 'tilesloaded', function(){     
    updateMap();           
   }); 
  }


function updateMap() {
  map.setCenter(new google.maps.LatLng(latitude, longitude));
  map.setZoom(13);

  marker = new google.maps.MarkerImage("/android_asset/www//graphics/car.png",
new google.maps.Size(96.0, 96.0),
new google.maps.Point(0, 0),
new google.maps.Point(48.0, 48.0)
 );

  markerShadow = new google.maps.MarkerImage("/android_asset/www/graphics/car_shadow.png",
new google.maps.Size(145.0, 96.0),
new google.maps.Point(0, 0),
new google.maps.Point(48.0, 48.0)
 ); 

  point = new google.maps.LatLng(latitude,longitude);

  if(!markerUserPosition){
// Create marker
markerUserPosition = new google.maps.Marker({
  position: point,
  map: map,
  icon: marker,
  shadow: markerShadow,
  draggable:false,
      animation: google.maps.Animation.DROP
    });
  } else {
     // Move marker
      markerUserPosition.setPosition(point);        
  }

}

UPDATE: Is there a way to destroy a Google map completely? Because on hide I can technically destroy the map completely and load it when required.

Answer 1

Once you $("#target-map-block").show(); , you can just rebuild the map by

map = new google.maps.Map(document.getElementById("map"), mapOptions);

Answer 2

Try like this,

$("#button-id-to-show").click(function() {
  $("#target-map-block").show();
  updateMap();
});