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);
}

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);
}

• javascript
• function

3 Answers 3

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);
}

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.

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 = [];
}