Google Maps v3 infoWindow addDomListener for HTML Button

StackOverflow https://stackoverflow.com/questions/19355960

Question

I have a simple google Maps example JS File:

    /*Standard Setup Google Map*/ 
    var latlng = new google.maps.LatLng(-25.363882,131.044922); 
    var myOptions = { 
        zoom: 15, 
        center: latlng, 
        panControl: false,
        mapTypeControl: true,
        scaleControl: true,
        mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        zoomControl: true,
        zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    };

    // add Map 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // add Marker
    var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(-25.363882,131.044922)
    });

    // add Info Window
    var infoWindow = new google.maps.InfoWindow();

Now i want to open the info Box when i click on a button in the my html template:

HTML File:

<body onload="initialize()">
 ...
 <div id="map_canvas"></div>
 ...
 <button id="test">Click</button>
 ...
</body>

adding these lines to my JS File:

    var onMarkerHTMLClick = function() {

        var marker = this;
        var latLng = marker.getPosition();
        var content = '<div style="text-align: center; font-size:14px;"><center><b>Company GmbH</b></center><div>Broadway Str.5</div><div>45132 Canvas</div></div>';

        map.panTo(marker.getPosition());
        map.setZoom(15);

        infoWindow.setContent(content);

        infoWindow.open(map, marker);
     };

    google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
    });

    google.maps.event.addDomListener(document.getElementById("test"),'click', onMarkerHTMLClick);

error: marker.getPosition is not a function why should this not work? If i do the same with a click function on the marker itself the window opens with no problems..

Was it helpful?

Solution

You need to trigger the event that opens the infoWindow. Probably the easiest thing to do is store your markers in a global array or if you dont have many just select them by ID.

Example

var myButton = document.getElementById('THE_ID');
google.maps.event.addDomListener(myButton, 'click', openInfoWindow);

openInfoWindow just being the callback function where you can trigger the event.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top