Google map stops working after clicking and moving mouse

Question

I have following code that has two buttons, one to show a map and the other to hide it and show a paragraph. The problem is that first time I open the page it shows the map but as soon as I try to move it to find the selected positions it stops showing the map.

Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">

<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>


</head>

<body>

        <div id="myDiv" class="col-md-4 hidden-xs"
            style="padding-left: 7px; background-color: white;">

            <div class="row"
                style="margin-left: 30px; margin-top: 36px; background-color: white;">

                <div id="hideMap" class="col-md-5" onClick="hideMap()">Hide</div>
                <div id="showMap" class="col-md-5" onClick="populateMap()">Show</div>
            </div>

            <div id="myMap" style="width: 380px; height: 400px"></div>
            <div id="para"><p>This is it</p></div>
        </div>



<script>


    function hideMap() {
        $("#myMap").hide();
        $("#para").show();
    }

    function populateMap() {
        $("#para").hide();
        $("#myMap").show();
    }
    var map;
    var markers = [];
    var pinColor = "FE7569";
    function pinImage(imagenum) {
        return image = new google.maps.MarkerImage(
                "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="
                        + imagenum + "|" + pinColor);
    }

    function initialize() {
        var centreLoc = new google.maps.LatLng(37.9908372,23.7383394);
        var mapOptions = {
            zoom : 13,
            center : centreLoc,
            disableDefaultUI : true,
            mapTypeControlOptions : google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('myMap'),
                mapOptions);
        hideMap();
        var results = [ [ 'Pos1', 37.9908372,23.7383394 ],
                [ 'Pos2', 37.89,23.7383394 ] ];
        processResults(results);
    }

    function processResults(results) {
        for (var i = 0, marker; marker = markers[i]; i++) {
            marker.setMap(null);
        }
        markers = [];
        $("#marker-container").empty();
        for (i = 0; i < results.length; i++) {

            var place = results[i][0];
            var placeLoc = new google.maps.LatLng(results[i][2], results[i][3]);
            // Create a marker for each place.
            var marker = new google.maps.Marker({
                map : map,
                title : place,
                position : placeLoc,
                icon : pinImage(i + 1)
            });

            markers.push(marker);
            var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>"
                    + place + "</span>");
            $("#marker-container").append(description);
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

</body>
</html>

Before (Once the demo is loaded)

enter image description here

After (Try to find an address on the map)

enter image description here

What do you mean "move" the map? Moving the HTML code across the DOM? Or panning the map with the mouse? — Jeremy Thille, May 28 '15 at 06:28
Could you try and make a Fiddle? I tried with your code, but I can't manage to have a map show up : https://jsfiddle.net/n2sfpLca/1/ — Jeremy Thille, May 28 '15 at 07:47
[working fiddle](https://jsfiddle.net/n2sfpLca/2/) [but I don't see the issue] — geocodezip, May 28 '15 at 14:31
@geocodezip yeah it does not stop working,however it is not showing the two selected locations on the map. Question is also updated. — Jack, May 28 '15 at 23:29

geocodezip · Accepted Answer · 2015-05-29T02:18:51.447

You need to trigger the 'resize' event on the map after it is displayed, then set the center once it has a size:

function populateMap() {
    $("#para").hide();
    $("#myMap").show();
    google.maps.event.trigger(map,'resize');
    map.setCenter(centreLoc);
}

updated fiddle

code snippet (removed signed_in=true, doesn't play well in SO code snippets):

function hideMap() {
        $("#myMap").hide();
        $("#para").show();
    }

    function populateMap() {
        $("#para").hide();
        $("#myMap").show();
        google.maps.event.trigger(map,'resize');
        map.setCenter(centreLoc);
    }
    var map;
    var centreLoc;
    var markers = [];
    var pinColor = "FE7569";
    function pinImage(imagenum) {
        return image = new google.maps.MarkerImage(
                "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="
                        + imagenum + "|" + pinColor);
    }

    function initialize() {
        centreLoc = new google.maps.LatLng(37.9908372,23.7383394);
        var mapOptions = {
            zoom : 13,
            center : centreLoc,
            disableDefaultUI : true,
            mapTypeControlOptions : google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('myMap'),
                mapOptions);
        hideMap();
        var results = [ [ 'Pos1', 37.9908372,23.7383394 ],
                [ 'Pos2', 37.89,23.7383394 ] ];
        processResults(results);
    }

    function processResults(results) {
        for (var i = 0, marker; marker = markers[i]; i++) {
            marker.setMap(null);
        }
        markers = [];
        $("#marker-container").empty();
        for (i = 0; i < results.length; i++) {

            var place = results[i][0];
            var placeLoc = new google.maps.LatLng(results[i][1], results[i][2]);
            // Create a marker for each place.
            var marker = new google.maps.Marker({
                map : map,
                title : place,
                position : placeLoc,
                icon : pinImage(i + 1)
            });

            markers.push(marker);
            var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>"
                    + place + "</span>");
            $("#marker-container").append(description);
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places.js"></script>
<div id="myDiv" class="col-md-4 hidden-xs"
            style="padding-left: 7px; background-color: white;">

            <div class="row"
                style="margin-left: 30px; margin-top: 36px; background-color: white;">

                <div id="hideMap" class="col-md-5" onClick="hideMap()">Hide</div>
                <div id="showMap" class="col-md-5" onClick="populateMap()">Show</div>
            </div>

            <div id="myMap" style="width: 380px; height: 400px"></div>
            <div id="para"><p>This is it</p></div>
</div>

score 1 · Answer 2 · answered May 29 '15 at 07:13

sorry for late response
if you mind please this one

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
</head>
<body>
  <div id="myDiv" class="col-md-4 hidden-xs" style="padding-left: 7px; background-color: white;">
    <div class="row" style="margin-left: 30px; margin-top: 36px; background-color: white;">
      <div id="hideMap" class="col-md-5" onClick="hideMap()">Hide</div>
      <div id="showMap" class="col-md-5" onClick="populateMap()">Show</div>
    </div>
    <div id="myMap" style="width: 380px; height: 400px;"></div>
    <div id="para"><p>This is it</p></div>
  </div>
<script>
  function hideMap() {
    $("#myMap").css('display', 'none');
    $("#para").css('display', 'block');
  }
  function populateMap() {
    $("#para").hide();
    $("#myMap").show();
  }
  var map;
  var markers = [];
  var pinColor = "FE7569";
  function pinImage(imagenum) {
    return image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + imagenum + "|" + pinColor);
  }
  function initialize() {
    var centreLoc = new google.maps.LatLng(37.9908372,23.7383394);
    var mapOptions = {
      zoom : 10,
      center : centreLoc,
      disableDefaultUI : true,
      mapTypeControlOptions : google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('myMap'), mapOptions);
    var results = [ [ 'Pos1', 37.9908372,23.7383394 ], [ 'Pos2', 37.89,23.7383394 ] ];
    processResults(results);
    google.maps.event.addListenerOnce(map, 'idle', function(){
      hideMap();
    });
  }
  function processResults(results) {
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }
    markers = [];
    $("#marker-container").empty();
    for (i = 0; i < results.length; i++) {
      var place = results[i][0];
      var placeLoc = new google.maps.LatLng(results[i][1], results[i][2]);
      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map : map,
        title : place,
        position : placeLoc,
        icon : pinImage(i + 1)
      });
      markers.push(marker);
      var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>" + place + "</span>");
        $("#marker-container").append(description);
    }
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>

I put wrong style

<div id="myMap"></div>
<div id="para" style="width: 380px; height: 400px;"><p>This is it</p></div>

to this one

<div id="myMap" style="width: 380px; height: 400px;"></div>
<div id="para"><p>This is it</p></div>

Google map stops working after clicking and moving mouse

2 Answers2