javascript - Refreshing Google Map is preventing ability to add markers - Stack Overflow

admin管理员组

文章数量:1389779

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

Share Improve this question Follow edited Aug 16, 2013 at 5:55 Jonathan 5,99311 gold badge2929 silver badges3535 bronze badges asked Nov 24, 2010 at 14:49 KennC.KennC. 3,45566 gold badges2222 silver badges1818 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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

本文标签： javascriptRefreshing Google Map is preventing ability to add markersStack Overflow