-1
Как показать инфобокс при использовании KML файлов
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>Я использую файл KML только для маскировки остального мира и показать только свою страну, и я добавил теперь я хочу добавить инфобокс на клик маркера, но он не работает.
вот мой KML File
ниже мой код
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> \t
еще показываются последние данные маркерные – Romil
У меня есть создали переменную и хранения данных в том, что для правильной точки зрения HTML, но все-таки последний маркер данных показывает – Romil
'вар ibContent = «
' + data.description + '
' + '