google map disappears when marker clicked

Question

I have an infobox on a clickable polylines and polygons.

When I click any of them an invisible marker is created and the infoxbox pops up for it.

The problem is that when the infoxbox appears the map dissapears.

I don't get any javascript errors.

This is my code: (I have commented out all infoxbox features apart of the content text)

google.maps.event.addListener(mapObject, 'click', function(event) {
        var invisibleMarker = new google.maps.Marker({
                        position: new google.maps.LatLng(event.latLng),
                        map: map
                    });

  var boxText = document.createElement("div");
  boxText.style.cssText = "background: none; padding: 0;";
  boxText.innerHTML = '<div style="margin: 0 0 20px 0;padding: 18px;background: white url(/media/images/map-marker-info-bg.gif) repeat-x top left;">' + content[0] + '</div>';

        var myOptions = {
             content: boxText
                             /*,latlng: event.latLng
                             ,alignBottom: true
            ,pixelOffset: new google.maps.Size(-470, -20)
            ,boxStyle: { 
              background: "transparent url('/media/images/map-marker-info-arrow.png') no-repeat bottom right"
              ,opacity: 1
              ,width: "470px"
             }
            ,closeBoxMargin: "18px 18px 2px 2px"
            ,closeBoxURL: "/media/images/map-marker-info-close.gif"
            ,infoBoxClearance: new google.maps.Size(5, 5)
            ,enableEventPropagation: false*/
    };

    var ib = new InfoBox(myOptions);
    ib.open(map, invisibleMarker);

});

Can anybody help me resolve this issue?

Thank you

score 0 · Answer 1 · answered Dec 17 '12 at 23:05

There are a couple of problems:

1) google.maps.event.addListener(mapObject, 'click', function(event)

You haven't provided your map creation code, but the variable mapObject should be a map object... That doesn't fit with any of your other references to the map object map.

2) new google.maps.LatLng(event.latLng)

You don't need to parse the event.LatLng value, it will already be a latitude/longitude value.

Here is a working example, with the corrections noted above. The InfoBox will output undefined because content[0] is undefined, but that can be any valid text you want.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
    var map;
function test()
{
        var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

google.maps.event.addListener(map, 'click', function(event) {

        var invisibleMarker = new google.maps.Marker({
                        position: event.latLng,
                        map: map
                    });

  var boxText = document.createElement("div");
  boxText.style.cssText = "background: none; padding: 0;";
  boxText.innerHTML = '<div style="margin: 0 0 20px 0;padding: 18px;background: white url(/media/images/map-marker-info-bg.gif) repeat-x top left;">' + content[0] + '</div>';

        var myOptions = {
             content: boxText
                             /*,latlng: event.latLng
                             ,alignBottom: true
            ,pixelOffset: new google.maps.Size(-470, -20)
            ,boxStyle: { 
              background: "transparent url('/media/images/map-marker-info-arrow.png') no-repeat bottom right"
              ,opacity: 1
              ,width: "470px"
             }
            ,closeBoxMargin: "18px 18px 2px 2px"
            ,closeBoxURL: "/media/images/map-marker-info-close.gif"
            ,infoBoxClearance: new google.maps.Size(5, 5)
            ,enableEventPropagation: false*/
    };

    var ib = new InfoBox(myOptions);
    ib.open(map, invisibleMarker);

});
}
</script>
</head>
<body onload="test();">
    <div id="map_canvas"></div>
</body>
</html>

1) My code I posted is in a function createInfoWindow(mapObject,content, objectType). 'mapObject' variable is the clicked marker then 'map' is the map object defined above the function. 2) InvisibleMarker replaced mapObject for my testing, the function now uses 'mapObject'. I think this was the problem although I can't rememebr now exactly as I fixed it a while ago. content was an array so content[0] was a string to use as infoBox copy. Thanks for hints anyway — nickornotto, Jan 03 '13 at 12:10
I know what was the problem. I shouldn't have parsed latlng value as per 2) new google.maps.LatLng(event.latLng). It fixed the map dissapearance. I also use invisible marker now to display the infobox above a polyline it works fine. t even fixed a problem with displaying the info window for polyline - I had to click it 3 times to display a standar info window at all. Thanks for help — nickornotto, Jan 04 '13 at 09:06

score 0 · Answer 2 · edited Nov 27 '15 at 04:56

I want to use similar styled InfoBox for my polylines but need to pass clicked position I think. In original simple code it was

infowindow.setContent(content[0]);
infowindow.position = event.latLng;
infowindow.open(map);

and it worked

I have no idea how to do it for InfoBox. I tried to use in InfoBox options:

latlng: event.latLng

and then:

var ib = new InfoBox(myOptions);
ib.setPosition(event.latLng);
ib.open(map, mapObject);

but I'm getting:

Error: anchor.getPosition is not a function

Source File: http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js

google map disappears when marker clicked

2 Answers2