androidgoogle-maps-api-3infobubble

Clickable InfoBubble in Google Maps API 3


Good day! I just want to ask if an InfoBubble can have a listener. I tried to insert the text of the InfoBubble in a div and insert an onclick command there, but nothing happens.

Thanks in advance. By the way I am currently developing an android application, and using webview to display the map.


Solution

  • ok, jetpro,

    here's what I do in a similar scenario using javascript:

    /* json data object requires:
    data.Id,
    data.Lat,
    data.Lng,
    data.Name,
    data.Address,
    data.Date
    */
    function DisplayMapEvent(data, targetDiv) {
        var latlng, options, map, contentString, infowindow, marker;
    
        // setup our variables
        latlng = new window.google.maps.LatLng(data.Lat, data.Lng);
        options =
            {
                zoom: 15,
                center: latlng,
                mapTypeId: window.google.maps.MapTypeId.ROADMAP
            };
    
        // create the map inside our map <div> and apply the options
        map = new window.google.maps.Map(document.getElementById(targetDiv), options);
        map.setOptions(options);
    
        // info to display in the infowindow popup
        contentString =
                '<div>' +
                    '<b style="color: #DC6852;">' + data.Name + '</b><br />' +
                    'Where: ' + data.Address + '<br />' +
                    'When: '  + data.Date    + '<br />' +
                '</div>';
    
        // info/marker and popup objects setup
        infowindow = new window.google.maps.InfoWindow({
            content: contentString
        });
    
        marker = new window.google.maps.Marker({
            position: latlng,
            map: map
        });
    
        // add the usual suspect event handlers
        window.google.maps.event.trigger(map, 'resize');
    
        // to allow us to repoen a map marker infowindow if closed
        window.google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    
        // open infowindow on map once rendered
        infowindow.open(map, marker);
    
        // sit back and wonder at the glory of google maps mow :-)
    }
    

    In my case, I'm passing a json object into the DisplayMapEvent function, but you could rejig this to your own requirement. This function is called anytime I wish to add a new marker onto my map, so you may be able to lift this wholesale and refactor as required.

    Hope this helps.