Trigger event with infoWindow or InfoBox on click Google Map API V3

by

Ok I figured this out for infoWindow, but then I also figured it out for InfoBox since it is prettier and more customizable. I’m new to JavaScript and these closures can be very tricky.

For infoWindow

<!doctype html>
<html lang="en">
<head>
    <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
    <script type="text/javascript">

    var cityList = [
    ['Chicago', 41.850033, -87.6500523, 1],
    ['Illinois', 40.797177,-89.406738, 2]
    ];

    var demoCenter = new google.maps.LatLng(41,-87);

    var map;
    function initialize()
    {
        map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 7,
            center: demoCenter,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        addMarkers();
    }

    var boxText1 = document.createElement("div");
            boxText1.id = "boxText1";
            boxText1.className = "labelText1";
            boxText1.innerHTML = "title1";//this is created earlier 
    var boxList = [];

    function addMarkers()
    {
        var marker, i;
        var infowindow = new google.maps.InfoWindow({
            disableAutoPan: true
          ,isHidden:false
          ,pixelOffset: new google.maps.Size(-10, -10)
          ,closeBoxURL: ""
          ,pane: "mapPane"
          ,enableEventPropagation: true
        });
        for (var i = 0; i < cityList.length; i++)
        {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                map: map,
                id: i,
                title: cityList[i][0]
            });

            var boxText = document.createElement("div");
            boxText.id = i;
            boxText.className = "labelText" + i;
            boxText.innerHTML = cityList[i][0];
            boxList.push(boxText);

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                var contentString = '<div id="infoWindow">'
                    +'<div id="bodyContent">'
                    +'<p>'
                    + "This location is:<br>"
                    + marker.title
                    +'</p>'
                    +'</div>'
                    + '</div>';

                return function() {
                    infowindow.setContent(boxList[this.id]);
                    infowindow.open(map, marker);
                }
                })(marker, i)); //end add marker listener

                google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) {
                        return function() {
                          alert('clicked ' + cityList[i][0])
                        }
                      })(marker, i));
            } //endfor              
        }//end function

</script>
    </head>
    <body onload="initialize()">
        <div id="basic-map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="https://stackoverflow.com/">jQuery mobile with Google maps v3</a> examples</h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
            </div>
        </div>
    </body>
</html>

For InfoBox

<!doctype html>
<html lang="en">
<head>
    <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </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"
    src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"> </script>
    <script type="text/javascript">

    var cityList = [
    ['Chicago', 41.850033, -87.6500523, 1],
    ['Illinois', 40.797177,-89.406738, 2]
    ];

    var demoCenter = new google.maps.LatLng(41,-87);
    var boxList =[];

    function initialize() {
        map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 7,
            center: demoCenter,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        addMarkers();
    }

    function addMarkers(){
        for (var i = 0; i < cityList.length; i++)
        {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                map: map,
                id: i,
                title: cityList[i][0]
            });         

            var boxText = document.createElement("div");
            boxText.id = i;
            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
            boxText.innerHTML = "InfoBox for " + cityList[i][0];

            var myOptions = {
                content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-140, 0)
                ,zIndex: null
                ,boxStyle: {
                    background: "url('tipbox.gif') no-repeat"
                    ,opacity: 0.75
                    ,width: "280px"
                }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
            };

            var ib = new InfoBox(myOptions);
            boxList.push(ib);

            google.maps.event.addListener(marker,'click',(function(marker, i) {
                return function() {
                    boxList[i].open(map, this);
                }
            })(marker, i));

            google.maps.event.addDomListener(boxList[i].content_,'click',(function(marker, i) {
                    return function() {
                      alert('clicked ' + cityList[i][0])
                    }
                  })(marker, i));
        } //endfor  
    } //end function

    </script>
</head>
<body onload="initialize()">
    <div id="basic-map" data-role="page">
        <div data-role="header">
            <h1><a data-ajax="false" href="https://stackoverflow.com/">jQuery mobile with Google maps v3</a> examples</h1>
            <a data-rel="back">Back</a>
        </div>
        <div data-role="content">
            <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas" style="height:350px;"></div>
            </div>
        </div>
    </div>
</body>
</html>

More Related Contents:

  1. close InfoWindow before open another
  2. Google Maps API V3 Infobox.js removed
  3. Google Map Infowindow not showing properly
  4. Google Maps API 3 – Custom marker color for default (dot) marker
  5. How to to Get Places (e.g Gas Stations) along Route Between Origin and Destination in Google Maps API
  6. Using Icon Fonts as Markers in Google Maps V3
  7. Google Maps single country boundary [closed]
  8. Google Places API – REQUEST_DENIED
  9. Retrieve latitude and longitude of a draggable pin via Google Maps API V3
  10. Change marker size in Google maps V3
  11. Google has started highlighting search areas in Pink color. Is this feature available in Google Maps API 3?
  12. How to get a click event when a user clicks a (business) place on the map
  13. ‘item.geometry.location.kb’ and ‘item.geometry.location.jb’ returning undefined
  14. click event listener on styled map icons and labels
  15. How do I remove default markers?
  16. disable clickable landmark on google map
  17. Leaflet Map API with Google Satellite Layer [duplicate]
  18. Correct redirect URI for Google API and OAuth 2.0
  19. To get more than 5 reviews from google places API
  20. Highlighting borders of state and cities of US in Google Map API 3
  21. AngularJS ng-include inside of Google Maps InfoWindow?
  22. The key provided is not a valid Google API Key
  23. Directions API overview_polyline doesn’t have correct points
  24. Sending a details request to Google Places API – (CORS error) [duplicate]
  25. Google Maps API Multiple Markers with Infowindows
  26. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  27. Places for Android API deprecated alternative
  28. Google Map API – multiple icons in wrong spot
  29. This API project is not authorized to use this API. Please ensure that this API is activated in the APIs Console
  30. Google maps responsive resize

Leave a Comment