CODEWITHSUNDEEP
javascriptfunction
KennC.
KennC.

Reputation: 3445

Refreshing Google Map is preventing ability to add markers

I have problem with after 'refreshing' my Google Map, I am not able to place in marker by myself(Clicking). But before refreshing my map(With the initialize one), I am able to place marker in by clicking. May I know what's wrong with the code?

Below are my codes... 

//Initialize the map
function initialize() {
    var myLatlng = new google.maps.LatLng(2,110);
    var myOptions = {
        zoom: 3,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    infowindow = new google.maps.InfoWindow({
        content: "loading..."
    });
}

// Listen for click for markers
function marker()
{
    google.maps.event.addListener(map, 'click', function(event) {
        addMarker(event.latLng);
    });
}

// Place markers in by click

function addMarker(location) {
    marker = new google.maps.Marker({
        position: location,
        map: map,
        title:"Specified Location",
        icon: 'images/greenPoint.png'
    });
    markersArray.push(marker);
}


function refreshMap()
{
    var myLatlng = new google.maps.LatLng(1.1,107);
    var myOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
}

Upvotes: 4

Views: 11919

Answers (3)

Jonathan
Jonathan

Reputation: 6003

Using your markersArray you should be able to clear the map using the approach from here: Google Maps API v3: How to remove all markers?

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray = [];
}

Upvotes: 0

Eric Palakovich Carr
Eric Palakovich Carr

Reputation: 23338

Why are you creating a new google.maps.Map object in the first place? You should do something like this instead:

function refreshMap()
{
    var myLatlng = new google.maps.LatLng(1.1,107);
    var myOptions = {
        zoom: 4,
        center: myLatlng,
    };
    map.setOptions(myOptions);
}

Upvotes: 1

Colin Sullivan
Colin Sullivan

Reputation: 153

If I understand your problem correctly, you are saying that your map doesn't work after you call the refreshMap function. Sounds to me like a scoping issue, where the map variable is in a different scope the second time. Try putting this line:

var map = null;

at the very top of the file, to be sure that all of the map references are to the same global map variable.

Upvotes: 0

Related Questions