CODEWITHSUNDEEP
javascriptgoogle-maps
deejay
deejay

Reputation: 21

removing google maps object from div

I have created a map in div tag.later on at some user action I want to create the map of another station and draw new markers on it. How should I clear the map object in same div tag? 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google Maps Markers</title> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"
    type="text/javascript"></script>

</head>
<body>
<div id="map-canvas" style="width: 650px; height: 250px;"></div>

<script type="text/javascript">


var map;

var DFWCenter =  new google.maps.LatLng(32.9017,-97.0405770);    

function showMap()
  {

     map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 15,
    center: DFWCenter,
    mapTypeId: google.maps.MapTypeId.HYBRID  
    });

 }

If I do map=null, it still does not clear the map from div tag.

Upvotes: 0

Views: 2726

Answers (1)

geocodezip
geocodezip

Reputation: 161404

Don't destroy the existing map, re-use it. Call map.setCenter() and map.setZoom() with the new place (or map.fitBounds() with the new desired bounds). Remove all the existing markers and create new ones.

(note: there have been reports of memory leaks when attempting to destroy a map instance and recreate it, see issue 3803 on the issues list, there may be others)

Upvotes: 1

Related Questions