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> ' + 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> ' + 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> 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>