How to show infobox when using KML files

Question

function initMap() {
    var myLatLng = {lat: 19.0760, lng: 72.8777};    
    var map = new google.maps.Map(document.getElementById('map-canvas'), {        
        center: new google.maps.LatLng(22.4913, 78.9000),
        zoom:5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
    });         
    var geocoder = new google.maps.Geocoder();
    var geoXml = new geoXML3.parser({
        map: map, 
        zoom: false,
        suppressInfoWindows: true, 
        preserveViewport: true       
    });
    geoXml.parse('India_KML.kml');     
    var json = [
      {
        "name": "Kayaking it in Kerala",
        "lat": 11.372230617418888,
        "lng": 76.00253776872557,
        "location" : "TAMIL NADU, INDIA",
        "sports": "Kayaking",
        "vendor": "Goodwave Adventure",
        "price" : "2000",
        "image" : "http://advensure.dev/img/vendors/MG_3438.jpg",
        "url" : "http://advensure.dev/",
        "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
      },
      {
        "name": "Wildwater kayaking on the Kaveri",
        "lat": 12.372230617418888,
        "lng": 78.00253776872557,
        "location" : "KERALA, INDIA",
        "sports": "Kayaking",
        "Vendor": "Goodwave Adventure",
        "price" : "2000",
        "image" : "http://advensure.dev/img/vendors/MG_3438-500x333.jpg",
        "url" : "http://advensure.dev/",
        "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
      },
      {
        "name": "Kayaking it in Kerala 2",
        "lat": 11.372230617418888,
        "lng": 75.00253776872557,
        "location" : "KERALA, INDIA",
        "sports": "Kayaking",
        "vendor": "Goodwave Adventure",
        "price" : "3000",
        "image" : "http://advensure.dev/img/vendors/MG_3438.jpg",
        "url" : "http://advensure.dev/",
        "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
      }
    ]   
    var icon = {
        url: "/img/marker/location-pointer.png", // url
        scaledSize: new google.maps.Size(40, 40), // scaled size
        origin: new google.maps.Point(0,0), // origin
        anchor: new google.maps.Point(0, 0) // anchor
    };
    var infoBox;
    var boxOptions = {
        disableAutoPan: true,                
        alignBottom: true,
        boxStyle: {
            whiteSpace: "wrap",
            width: "420px",            
            padding: "5px",
            backgroundColor: "white"
        },
        closeBoxURL: "",
        maxWidth: 0,  // no max
        pane: "floatPane",
        pixelOffset: new google.maps.Size(-95, -10), 
        infoBoxClearance: new google.maps.Size(1, 1),        
        contextmenu: true
    };    
    var ibContent = '';    
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
        latLng = new google.maps.LatLng(data.lat, data.lng); 

        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: icon,
            title: data.name
        });
        // google.maps.event.addListener(marker, "click", function(e) {
        //     infoBox.setContent(data.description);
        //     infoBox.open(map, marker);
        // });
        infoBox  = new InfoBox(boxOptions); 
        ibContent =
        '<div class="infobox">' +
            '<div class="row">' +
                '<div class="col-lg-12">' +
                    '<div class="header">' +                    
                        '<h5>' + data.location + '</h5>' +
                    '</div>' +
                '</div>' +
                '<div class="col-lg-6">' +
                    '<div class="marker-image">' +                    
                        '<img src="' + data.image +  '" class="img-responsive">'+                            
                    '</div>' +
                '</div>' +
                '<div class="col-lg-6">' +
                    '<div class="date">' +                    
                        
                    '</div>' +
                '</div>' +
                '<div class="col-lg-12">' +
                    '<div class="marker-description">' +
                        '<h5>' + data.name + '</h5>' +                    
                        '<h6>' + data.sports + '</h6>' +
                        '<h6>' + data.vendor + '</h6>' +
                        '<h6><i class="fa fa-inr"></i>&nbsp;' + data.price + '</h6>' +
                        '<p>' + data.description + '</p>' +
                        '<a class="btn btn-midnight" href="' + data.url + '">View</a>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>';   
        google.maps.event.addListener(marker, "click", (function(marker,data) {
            return function(e) {
                infoBox.setContent(ibContent);
                infoBox.open(map, marker);
            }
        })(marker, data));
    }    
    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });          
}
google.maps.event.addDomListener(window, 'load', initMap);

#map-canvas {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  /* zoom:0.8;  */
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?region=IN&libraries=places"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map-canvas"></div>
<script>
</script>

function initMap() {
    var myLatLng = {lat: 19.0760, lng: 72.8777};    
    var map = new google.maps.Map(document.getElementById('map-canvas'), {        
        center: new google.maps.LatLng(22.4913, 78.9000),
        zoom:5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
    });         
    var geocoder = new google.maps.Geocoder();
    var geoXml = new geoXML3.parser({
        map: map, 
        zoom: false,
        suppressInfoWindows: true, 
        preserveViewport: true       
    });
    geoXml.parse('India_KML.kml');     
    var json = [
      {
        "name": "Kayaking it in Kerala",
        "lat": 11.372230617418888,
        "lng": 76.00253776872557,
        "location" : "TAMIL NADU, INDIA",
        "sports": "Kayaking",
        "vendor": "Goodwave Adventure",
        "price" : "2000",
        "image" : "http://abc.dev/img/vendors/MG_3438.jpg",
        "url" : "http://abc.dev/",
        "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
      },
      {
        "name": "Wildwater kayaking on the Kaveri",
        "lat": 12.372230617418888,
        "lng": 78.00253776872557,
        "location" : "KERALA, INDIA",
        "sports": "Kayaking",
        "Vendor": "Goodwave Adventure",
        "price" : "2000",
        "image" : "http://abc.dev/img/vendors/MG_3438-500x333.jpg",
        "url" : "http://abc.dev/",
        "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
      },
      {
        "name": "Kayaking it in Kerala 2",
        "lat": 11.372230617418888,
        "lng": 75.00253776872557,
        "location" : "KERALA, INDIA",
        "sports": "Kayaking",
        "vendor": "Goodwave Adventure",
        "price" : "3000",
        "image" : "http://abc.dev/img/vendors/MG_3438.jpg",
        "url" : "http://abc.dev/",
        "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
      }
    ]   
    var icon = {
        url: "/img/marker/location-pointer.png", // url
        scaledSize: new google.maps.Size(40, 40), // scaled size
        origin: new google.maps.Point(0,0), // origin
        anchor: new google.maps.Point(0, 0) // anchor
    };
    var infoBox;
    var boxOptions = {
        disableAutoPan: true,                
        alignBottom: true,
        boxStyle: {
            whiteSpace: "wrap",
            width: "420px",            
            padding: "5px",
            backgroundColor: "white"
        },
        closeBoxURL: "",
        maxWidth: 0,  // no max
        pane: "floatPane",
        pixelOffset: new google.maps.Size(-95, -10), 
        infoBoxClearance: new google.maps.Size(1, 1),        
        contextmenu: true
    };    
    var ibContent = '';    
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
        latLng = new google.maps.LatLng(data.lat, data.lng); 

        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: icon,
            title: data.name
        });
        // google.maps.event.addListener(marker, "click", function(e) {
        //     infoBox.setContent(data.description);
        //     infoBox.open(map, marker);
        // });
        infoBox  = new InfoBox(boxOptions); 
        ibContent =
        '<div class="infobox">' +
            '<div class="row">' +
                '<div class="col-lg-12">' +
                    '<div class="header">' +                    
                        '<h5>' + data.location + '</h5>' +
                    '</div>' +
                '</div>' +
                '<div class="col-lg-6">' +
                    '<div class="marker-image">' +                    
                        '<img src="' + data.image +  '" class="img-responsive">'+                            
                    '</div>' +
                '</div>' +
                '<div class="col-lg-6">' +
                    '<div class="date">' +                    
                        
                    '</div>' +
                '</div>' +
                '<div class="col-lg-12">' +
                    '<div class="marker-description">' +
                        '<h5>' + data.name + '</h5>' +                    
                        '<h6>' + data.sports + '</h6>' +
                        '<h6>' + data.vendor + '</h6>' +
                        '<h6><i class="fa fa-inr"></i>&nbsp;' + data.price + '</h6>' +
                        '<p>' + data.description + '</p>' +
                        '<a class="btn btn-midnight" href="' + data.url + '">View</a>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>';   
        google.maps.event.addListener(marker, "click", (function(marker,data) {
            return function(e) {
                infoBox.setContent(ibContent);
                infoBox.open(map, marker);
            }
        })(marker, data));
    }    
    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });          
}
google.maps.event.addDomListener(window, 'load', initMap);

#map-canvas {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  /* zoom:0.8;  */
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?region=IN&libraries=places"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map-canvas"></div>
<script>
</script>

I am using KML file just to mask rest of the world and show only my country and i have added multiple marker now i want to add infobox on click of marker but its not working.

here is my KML File

below is my code

function initMap() {
    var myLatLng = {lat: 19.0760, lng: 72.8777};    
    var map = new google.maps.Map(document.getElementById('map-canvas'), {        
        center: new google.maps.LatLng(22.4913, 78.9000),
        zoom:5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
    });         
    var geocoder = new google.maps.Geocoder();
    var geoXml = new geoXML3.parser({
        map: map, 
        zoom: false,
        suppressInfoWindows: true, 
        preserveViewport: true       
    });
    geoXml.parse('India_KML.kml');     
    var json = [
      {
        "title": "Dive goa",
        "lat": 11.372230617418888,
        "lng": 76.00253776872557,
        "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
      },
      {
        "title": "Dive Goa2",
        "lat": 12.372230617418888,
        "lng": 78.00253776872557,
        "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
      },
      {
        "title": "Dive Goa3",
        "lat": 11.372230617418888,
        "lng": 75.00253776872557,
        "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
      }
    ]           
    var infoBox;
    var boxOptions = {
        disableAutoPan: true,                
        alignBottom: true,
        boxStyle: {
            whiteSpace: "nowrap",
            width: "230px",
            padding: "5px",
            backgroundColor: "white"
        },
        closeBoxURL: "",
        maxWidth: 0,  // no max
        pane: "floatPane",
        pixelOffset: new google.maps.Size(-95, -10), 
        infoBoxClearance: new google.maps.Size(1, 1),        
        contextmenu: true
    };
    infoBox  = new InfoBox(boxOptions);    
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
        latLng = new google.maps.LatLng(data.lat, data.lng); 

        // Creating a marker and putting it on the map
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,                
            title: data.title
        });
        google.maps.event.addListener(marker, "click", function(e) {
            infoBox.setContent(data.description);
            infoBox.open(map, marker);
        });
    }    
    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });          
}

#map-canvas { 
  height: 100%; 
  width: 100%; 
  position:absolute; 
  top: 0; 
  left: 0; 
  z-index: 0;
  zoom:0.8;  
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?region=IN&libraries=places"></script>

<div id="map-canvas"></div>

geocodezip · Accepted Answer · 2016-12-01T06:23:09.090

This has nothing to do with your KML mask. You have a CSS setting that is breaking the marker click listeners (zoom: 0.8), remove that and the InfoBoxes appear on click (they have content and formatting issues though).

You also need function closure in the marker click event functions (or you only get the InfoBox on the last marker):

    google.maps.event.addListener(marker, "click", (function(marker,data) {
      return function(e) {
        infoBox.setContent(data.description);
        infoBox.open(map, marker);
    }})(marker, data));

working code snippet (without the mask):

function initMap() {
  var myLatLng = {
    lat: 19.0760,
    lng: 72.8777
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(22.4913, 78.9000),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
  });
  var geocoder = new google.maps.Geocoder();
  /* var geoXml = new geoXML3.parser({
      map: map, 
      zoom: false,
      suppressInfoWindows: true, 
      preserveViewport: true       
  }); */
  // geoXml.parse('India_KML.kml');     
  var json = [{
    "title": "Dive goa",
    "lat": 11.372230617418888,
    "lng": 76.00253776872557,
    "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
  }, {
    "title": "Dive Goa2",
    "lat": 12.372230617418888,
    "lng": 78.00253776872557,
    "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
  }, {
    "title": "Dive Goa3",
    "lat": 11.372230617418888,
    "lng": 75.00253776872557,
    "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
  }]
  var infoBox;
  var boxOptions = {
    disableAutoPan: true,
    alignBottom: true,
    boxStyle: {
      whiteSpace: "wrap",
      width: "230px",
      padding: "5px",
      backgroundColor: "white"
    },
    closeBoxURL: "",
    maxWidth: 0, // no max
    pane: "floatPane",
    pixelOffset: new google.maps.Size(-95, -10),
    infoBoxClearance: new google.maps.Size(1, 1),
    contextmenu: true
  };
  infoBox = new InfoBox(boxOptions);
  for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng);

    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      title: data.title
    });
    google.maps.event.addListener(marker, "click", (function(marker, data) {
      return function(e) {
        var ibContent = '<div class="infobox">' + '<div class="row">' + '<div class="col-lg-12">' + '<div class="marker-description">' + '<p>' + data.description + '</p>' + '</div>' + '</div>' + '</div>' + '</div>';
        infoBox.setContent(ibContent);
        infoBox.open(map, marker);
      }
    })(marker, data));
  }
  google.maps.event.addListener(map, "click", function() {
    infoBox.close();
  });
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

#map-canvas {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  /* zoom:0.8;  */
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?region=IN&libraries=places"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map-canvas"></div>
<script>
</script>

I have created variable and storing data into that for proper html view but still last marker data is showing — Romil, Dec 01 '16 at 06:02
`var ibContent = '
' + '
' + '
' + '
' + '
' + data.description + '
' + '
' + '
' + '
' + '
';` and set this `infoBox.setContent(ibContent);` — Romil, Dec 01 '16 at 06:02
Does the example in my answer work correctly for you? From my answer "You also need function closure in the marker click event functions (or you only get the InfoBox on the last marker):" Are you sure you included the changes to the click event handler? — geocodezip, Dec 01 '16 at 06:16
title is showing correctly for each marker but data is showing for last only — Romil, Dec 01 '16 at 06:23
The data in the infobox shows correctly in my answer (above), you must be doing something differently. — geocodezip, Dec 01 '16 at 06:25
solve my problem add ibContent inside clouser but how can i close infowindow onclick of map? — Romil, Dec 01 '16 at 07:07
Did you see the code in my answer that does that ('click' event listener on the map) — geocodezip, Dec 01 '16 at 14:21
can you tell me if t want to paste json data into my html div how can i do this and if i mouseover on marker div of that marker should popup or vice varsa? — Romil, Dec 01 '16 at 17:26
when i am using KML, when i am clicking on outerboundryis part of the map infobox is not closing — Romil, Dec 02 '16 at 05:10
Then add a click listener to the KmlLayer to close the infobox — geocodezip, Dec 02 '16 at 08:07
`google.maps.event.addListener(geoXml, "click", function() { infoBox.close(); });` - -like this? — Romil, Dec 02 '16 at 08:12

How to show infobox when using KML files

1 Answers1