I'm using geoxml3 and Google map to display a KML file with some placemarks have names. I created the parser like this:
$(function() {
var myOptions = {
center: new google.maps.LatLng(105.4009049697155, 45.9307395294156),
zoom: 15,
mapTypeId: "satellite",
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions
);
var geoXml;
function initialize() {
geoXml = new geoXML3.parser({
map: map,
singleInfoWindow: false,
processStyles: false,
createMarker: createMarker,
afterParse: useTheData,
});
var kml_string =
'<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"> <Document> <name>Test</name> <Folder id="kml_1"> <name>d_y_n04</name> <Folder id="test"><name>test</name> <Placemark id="kml_478"> <name>placemark name 1</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4016150599436,45.9305731100841,488.499999999993</coordinates> </Point> </Placemark> <Placemark id="kml_368"> <name>placemark name 2</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4009049697155,45.9307395294156,0</coordinates> </Point> </Placemark> <Placemark id="kml_305"> <name>placemark name 3</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.400948826637,45.93090719596221,0</coordinates> </Point> </Placemark> <Placemark id="kml_480"> <name>Placemark name 4</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4008685356762,45.9313055053092,244.499999999993</coordinates> </Point> </Placemark> <Placemark id="kml_289"> <name>Placemark name 5</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4112903957788,45.93645760034801,0</coordinates> </Point> </Placemark> <Placemark id="kml_478"> <name>Placemark name 7</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4016150599436,45.9305731100841,488.499999999993</coordinates> </Point> </Placemark> <Placemark id="kml_297"> <name>Placemark name 6</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.403974541921,45.9341462756221,0</coordinates> </Point> </Placemark> </Folder> </Folder> </Document> </kml>';
geoXml.parseKmlString(kml_string);
marker_event = google.maps.event.addListener(
map,
"zoom_changed",
function() {
display_markers();
}
);
center_changed_event = map.addListener("center_changed", () => {
display_markers();
});
function display_markers() {
var mapBounds = map.getBounds();
geoXml.docs[0].markers.forEach(function(marker) {
var in_bounds = mapBounds.contains(marker.getPosition());
marker.setVisible(in_bounds);
});
geoXml.docs[0].placemarks.forEach(function(placemark) {
if (placemark.Point) {
placemark.style.scale = 1;
}
});
}
}
function createMarker(placemark, doc) {
var markerOptions = {
optimized: true,
position: placemark.latlng,
map: map,
label: placemark.name,
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 4,
},
visible: true,
};
var marker = new google.maps.Marker(markerOptions);
doc.markers.push(marker);
return marker;
}
function useTheData(doc) {
for (var i = 0; i < doc[0].placemarks.length; i++) {
var placemark = doc[0].placemarks[i];
if (placemark.polygon) {
placemark.polygon.normalStyle = {
strokeColor: "#ffff00",
strokeWeight: 1,
strokeOpacity: 0,
fillColor: "#ffff00",
fillOpacity: 0,
};
placemark.polygon.setOptions(placemark.polygon.normalStyle);
}
}
}
initialize();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Import KML</title>
</head>
<body>
<div id="map_canvas" style="width:1000px; height:550px; border: 2px solid #3872ac;"></div>
</body>
</html>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/ProjectedOverlay.js"></script>
The problem is when zooming the map smaller the display name of placemarks override each other like this:
So I tried to resize those names by adding zoom_changed event then change the style's scale like this but it didn't work:
google.maps.event.addListener(map, "zoom_changed", function () {
geoXml.docs[0].placemarks.forEach(function (placemark) {
if (placemark.Point) {
placemark.style.scale = 0.5;
}
});
}
);
Please tell me what I'm doing wrong or is there a way to change the font size of placemark's names when zooming map.
My suggestion would be to hide the labels once the zoom is less than 17 (or whatever threshold you feel gives the best experience). You can use the code below to dynamically change the fontSize based on the zoom, if that is what you really want (but eventually the labels will be unreadable).
One option to do that would be to set the fontSize of the label to "0px" when you want it hidden, set it to "14px" (the default size), when you want it shown:
google.maps.event.addListener(map, "zoom_changed", function() {
if (map.getZoom() < 17) {
geoXml.docs[0].markers.forEach(function(placemark) {
if (placemark.getMap() != null) { // only process markers that are shown
var label = placemark.getLabel();
console.log(label);
if (typeof label === 'string') {
var labelObj = {};
labelObj.text = label;
labelObj.fontSize = "0px"; // hide the label
placemark.setLabel(labelObj);
} else {
label.fontSize = "0px";
placemark.setLabel(label);
}
}
});
} else {
geoXml.docs[0].markers.forEach(function(placemark) {
if (placemark.getMap() != null) { // only process markers that are shown
var label = placemark.getLabel();
console.log(label);
if (typeof label === 'string') {
var labelObj = {};
labelObj.text = label;
label.fontSize = "14px"; // show the label at the default size
placemark.setLabel(labelObj);
} else {
label.fontSize = "14px";
placemark.setLabel(label);
}
}
});
}
});
$(function() {
var myOptions = {
center: new google.maps.LatLng(105.4009049697155, 45.9307395294156),
zoom: 15,
mapTypeId: "satellite",
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions
);
google.maps.event.addListener(map, "zoom_changed", function() {
console.log("zoom=" + map.getZoom());
if (map.getZoom() < 17) {
geoXml.docs[0].markers.forEach(function(placemark) {
if (placemark.getMap() != null) {
var label = placemark.getLabel();
console.log(label);
if (typeof label === 'string') {
var labelObj = {};
labelObj.text = label;
labelObj.fontSize = "0px";
placemark.setLabel(labelObj);
} else {
label.fontSize = "0px";
placemark.setLabel(label);
}
}
});
} else {
geoXml.docs[0].markers.forEach(function(placemark) {
if (placemark.getMap() != null) {
var label = placemark.getLabel();
console.log(label);
if (typeof label === 'string') {
var labelObj = {};
labelObj.text = label;
label.fontSize = "14px";
placemark.setLabel(labelObj);
} else {
label.fontSize = "14px";
placemark.setLabel(label);
}
}
});
}
});
var geoXml;
function initialize() {
geoXml = new geoXML3.parser({
map: map,
singleInfoWindow: false,
processStyles: false,
createMarker: createMarker,
afterParse: useTheData,
});
var kml_string =
'<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"> <Document> <name>Test</name> <Folder id="kml_1"> <name>d_y_n04</name> <Folder id="test"><name>test</name> <Placemark id="kml_478"> <name>placemark name 1</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4016150599436,45.9305731100841,488.499999999993</coordinates> </Point> </Placemark> <Placemark id="kml_368"> <name>placemark name 2</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4009049697155,45.9307395294156,0</coordinates> </Point> </Placemark> <Placemark id="kml_305"> <name>placemark name 3</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.400948826637,45.93090719596221,0</coordinates> </Point> </Placemark> <Placemark id="kml_480"> <name>Placemark name 4</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4008685356762,45.9313055053092,244.499999999993</coordinates> </Point> </Placemark> <Placemark id="kml_289"> <name>Placemark name 5</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4112903957788,45.93645760034801,0</coordinates> </Point> </Placemark> <Placemark id="kml_478"> <name>Placemark name 7</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.4016150599436,45.9305731100841,488.499999999993</coordinates> </Point> </Placemark> <Placemark id="kml_297"> <name>Placemark name 6</name><style><LineStyle> <color>ff000000</color> </LineStyle></style><Point> <coordinates>105.403974541921,45.9341462756221,0</coordinates> </Point> </Placemark> </Folder> </Folder> </Document> </kml>';
geoXml.parseKmlString(kml_string);
marker_event = google.maps.event.addListener(
map,
"zoom_changed",
function() {
display_markers();
}
);
center_changed_event = map.addListener("center_changed", () => {
display_markers();
});
function display_markers() {
var mapBounds = map.getBounds();
geoXml.docs[0].markers.forEach(function(marker) {
var in_bounds = mapBounds.contains(marker.getPosition());
marker.setVisible(in_bounds);
});
geoXml.docs[0].placemarks.forEach(function(placemark) {
if (placemark.Point) {
placemark.style.scale = 1;
}
});
}
}
function createMarker(placemark, doc) {
var markerOptions = {
optimized: true,
position: placemark.latlng,
map: map,
label: placemark.name,
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 4,
},
visible: true,
};
var marker = new google.maps.Marker(markerOptions);
doc.markers.push(marker);
return marker;
}
function useTheData(doc) {
for (var i = 0; i < doc[0].placemarks.length; i++) {
var placemark = doc[0].placemarks[i];
if (placemark.polygon) {
placemark.polygon.normalStyle = {
strokeColor: "#ffff00",
strokeWeight: 1,
strokeOpacity: 0,
fillColor: "#ffff00",
fillOpacity: 0,
};
placemark.polygon.setOptions(placemark.polygon.normalStyle);
}
}
}
initialize();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Import KML</title>
</head>
<body>
<div id="map_canvas" style="width:1000px; height:550px; border: 2px solid #3872ac;"></div>
</body>
</html>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/ProjectedOverlay.js"></script>
Related
I have a KML file which I am passing on to Google Maps.
The KML file has a <Style> element, where I want to point to a .SVG file. The intention is that the marker should auto-scale when zooming in our out on the map.
The markup is below:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<Document>
<name>Some Name</name>
<Style id="GarageStyle">
<IconStyle>
<Icon>
<href>https://drive.google.com/uc?export=download&id=0B7m5RwNbU3b0VmpzRnI0aTBGbmM</href>
</Icon>
</IconStyle>
</Style>
<Placemark>
<name>Skave Autoværksted*</name>
<styleUrl>#GarageStyle</styleUrl>
<description><div style="clear: both; display: block; ">Skave Autoværksted*</div><div style="clear: both; display: block; ">Viborgvej 240</div><div style="clear: both; display: block; ">7500 Holstebro</ div ><div style="clear: both; display: block; ">Tlf: 97468101</ div ></description>
<address>Viborgvej 240, 7500 Holstebro</address>
<Point>
<coordinates>8.80521163606404,56.3903905969469</coordinates>
</Point>
</Placemark>
</Document>
</kml>
It doesnt work with the .SVG, but works with .PNG - is that because Google doesnt support .SVG icons for markers, or am I doing it wrong?
The code that initializes the map:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://maps.google.com/maps/api/js?key=MY_PRIVATE_KEY;callback?sensor=false" type="text/javascript"></script>
<script src="/Webresources/ClientGlobalContext.js.aspx" type="text/javascript"></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
</style>
<meta>
<meta>
</head>
<body style="word-wrap: break-word;">
<div id="map"></div>
<script type="text/javascript">
var attributes = GetGlobalContext().getQueryStringParameters().data;
var attributesSplit = attributes.split(",");
var addressField;
var zoom;
var mapType;
var arrayLength = attributesSplit.length;
for (var i = 0; i < arrayLength; i++) {
var currentAttribute = attributesSplit[i].split("=");
var attributeName = currentAttribute[0];
var attributeValue = currentAttribute[1];
switch (attributeName) {
case "address_field":
addressField = attributeValue;
break;
case "zoom":
zoom = parseInt(attributeValue);
break;
case "maptype":
mapTypeConfigured = attributeValue;
switch (mapTypeConfigured) {
case "terrain":
mapType = google.maps.MapTypeId.TERRAIN;
break;
case "satellite":
mapType = google.maps.MapTypeId.SATELLITE;
break;
default:
break;
}
break;
default:
break;
}
}
// Set zoom to default value if it has not been configured
if (!zoom) {
zoom = 16;
}
if (!mapType) {
mapType = google.maps.MapTypeId.SATELLITE;
}
var address = window.parent.Xrm.Page.getAttribute(addressField).getValue();
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: mapType,
zoom: zoom
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
map.setCenter(results[0].geometry.location);
}
});
var ctaLayer = new google.maps.KmlLayer({
url: generateUrl('URL_TO_KML_FILE'),
map: map,
preserveViewport: true
});
// Used to refresh the KML cache twice a day
function generateUrl(url) {
var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1; //months from 1-12
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var currentHour = dateObj.getHours();
var noon;
if(currentHour >= 12)
{
noon = "afterNoon";
}
else
{
noon = "beforeNoon";
}
var newdate = "&" + year + "_" + month + "_" + day + "_" + noon;
var newUrl = url + newdate;
return newUrl;
}
</script>
</body>
</html>
The problem in my example is that the URL needs to have an extension. Since I am hosting it on Google Drive there is no extension, hence the problem. So the URL should end with .SVG, .PNG or whatever is being used.
i'm using geoxml3 to parse my kml file.
this works so far.
now i'm trying to cluster these files so the map is not full of markers at low zoom levels
my kml file looks something like this (of course more markers(up to 200))
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<Placemark id="1">
<name>test1</name>
<Point>
<coordinates>10.5267012, 49.6812452</coordinates>
</Point>
</Placemark>
<Placemark id="2">
<name>test2</name>
<Point>
<coordinates>30.5267012, 24.6812452</coordinates>
</Point>
</Placemark>
</Document>
</kml>
here is my code in my index.php
<?php ?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>test123</title>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="lib/geoxml3.js"></script>
<script>
function clickMarker(i) {
google.maps.event.trigger(markers[i], "click");
}
function initialize() {
var center = new google.maps.LatLng(28.019440, -17.382813); //set map center
var mapOptions = {
zoom: 3, //set default zoom level
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP //set default map type(ROADMAP,SATELLITE,HYBRID,TERRAIN)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //***ORIGINAL***
var mcOptions = {gridSize: 50, maxZoom: 15};
markers = [];
markerclusterer = new MarkerClusterer(map, [], mcOptions);
var infoWindow = new google.maps.InfoWindow({maxWidth: 800});
var myParser = new geoXML3.parser({//*** ORIGINAL: only {map: map});
map: map, singleInfoWindow: true,
createMarker: function(placemark) {
//Constructing marker for each Placemark node, and then add it to the markclustere
var point = new google.maps.LatLng(placemark.point.lat, placemark.point.lng);
var marker = new google.maps.Marker({position: point});
markerclusterer.addMarker(marker);
google.maps.event.addListener(marker, "click", function() {
var marker_lat = marker.getPosition().lat();
var marker_lng = marker.getPosition().lng();
infoWindow.close();
infoWindow.setOptions({maxWidth: 800});
content = "<strong>" + placemark.name + "</strong><br>" + placemark.description;
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
markerclusterer.addMarker(marker);
}
});
myParser.parse('./kml/point-load.kml');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
so my question: why are the markers not clustered and not displayed even without clusters???
I get this error with your code:
Uncaught ReferenceError: MarkerClusterer is not defined
Because you aren't including the MarkerClusterer external library that defines that.
working example from your code (but not your KML as that wasn't provided)
I have html code for Google maps. I would like to add my custom location to the code but i cant figure out how. i did some research and to add custom locations you need to add kml file. I do not know how to do so. can someone help me? Bellow is my map code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Layer on Zoom in Google Fusion Tables</title>
<style>
#map_canvas { height: 550px; width: 825px; }
</style>
</head>
<body>
<input type="text" id="address" ></input><input onclick="geocode_address();" type="button" value="Zipcode"></input>
<div id="map_canvas"></div>
<script src="http://maps.google.com/maps/api/js?…
<script>
var map, countyTable, tractTable, ctyLayer;
var tractLayers = [];
var infowindow = new google.maps.InfoWindow({});
var geocoder = new google.maps.Geocoder();
function geocode_address() {
var address = document.getElementById('address').value…
geocoder.geocode( { 'address': address}, function(results, status) {
map.setCenter(results[0].geometry.locati…
map.setZoom(map.getZoom()+8);
});
}
function addClickHandler(FTLayer) {
google.maps.event.addListener(FTLayer, "click", function(event) {
infowindow.setOptions({pixelOffset:event…
content:event.infoWindowHtml,
position:event.latLng
});
infowindow.open(map);
});
}
map = new google.maps.Map(document.getElementById(… {
center: new google.maps.LatLng( 36.315125,-95.273437…
zoom: 4,
mapTypeId: "roadmap",
streetViewControl: false
});
</script>
</body>
</html>
Here is the kml example code:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<name>Example</name>
<description><![CDATA[Location update]]></description>
<Style id="style1">
<IconStyle>
<Icon>
<href></href>
</Icon>
</IconStyle>
</Style>
<Style id="style3">
<IconStyle>
<Icon>
<href></href></href>http://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style2">
<IconStyle>
<Icon>
<href></href></href>http://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png</href>
</Icon>
</IconStyle>
</Style>
<Placemark>
<name>Chase</name>
<description><![CDATA[<div dir="ltr&quo
I have been trying to figure out how to do it can you help me?
i'm trying to figure out the code shown of this page with the V2 https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/streetview-data?hl=es for the V3 of googlemaps but i can't refresh the position of the orange icon when navigating with the streetview.... any ideas?
Another point... how can i get the actual lat long when navigating on both views?
Here's some code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Zone -</title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false">
</script>
<script>
$(function(){
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
initialize();
});
var map;
var myPano;
var panoClient;
var nextPanoId;
var panorama;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var fenwayPark = new google.maps.LatLng(42.345573,-71.098326);
var fenwayPOV = {yaw:370.64659986187695,pitch:-20};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
panoClient = new google.maps.StreetViewService();
//map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(fenwayPark, 15);
google.maps.event.addListener(map, "click", function(overlay, latlng) {
// latlng will be null if the info window has been clicked.
if (latlng) {
panoClient.getNearestPanorama(latlng, showPanoData);
}
});
var panoramaOptions = {
position: fenwayPark,
pov: {
heading: 34,
pitch: -20
}
};
myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
//map.setStreetView(myPano);
myPano.setPano(fenwayPark, fenwayPOV);
google.maps.event.addListener(myPano, "error", handleNoFlash);
panoClient.getPanoramaByLocation(fenwayPark, 50, processSVData);
//myPano.setStreetView(myPano);
}
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
google.maps.event.addListener(marker, 'click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID
myPano.setPano(markerPanoID);
myPano.setPov({
heading: 270,
pitch: 0,
zoom: 1
});
myPano.setVisible(true);
});
}
}
</script>
</head>
<body>
</body>
</html>
I am using geoxml inn order to parse kml file containing number of points. Each marker has an info window with some information. Now what I would like is to add a button to each info window and onclick I would be able to display the information in that particular infowindow in a textbox.
Now my question is how am I able to add such button that on click I will get the info of the infowindow?
The following is an image of an infowindow:
And this is the code i have done so far:
function initialize() {
var mapOptions = {
center: new google
.maps.LatLng(35.898737028438, 14.5133403246687),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
infowindow = new google.maps.InfoWindow({});
}
function displayKml() {
initialize();
parser = new geoXML3.parser({
map: map,
infoWindow: infowindow,
singleInfoWindow: true,
zoom: true,
markerOptions: { optimized: false }
});
parser.parse("Uploads/" + document.getElementById('<%= text2.ClientID %>').value);
}
The kml file
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>route</name>
<Placemark>
<name>188</name>
<description>museum</description>
<Point>
<coordinates>14.5104009086433,35.8994513796904</coordinates>
</Point>
</Placemark>
<Placemark>
<name>196</name>
<description>museum</description>
<Point>
<coordinates>14.5105859971021,35.8991906966932</coordinates>
</Point>
</Placemark>
<Placemark>
<name>349</name>
<description>museum</description>
<Point>
<coordinates>14.5126379237713,35.8969782492105</coordinates>
</Point>
</Placemark>
</Document>
</kml>
One way: Override the createMarker function:
function displayKml() {
geo = new geoXML3.parser({
map: map,
zoom: true,
singleInfoWindow: true,
infoWindow: infowindow,
createMarker: createMarker
});
geo.parse(document.getElementById('kmlFile').value);
}
function createMarker(placemark, doc) {
// create a Marker to the map from a placemark KML object
// Load basic marker properties
var markerOptions = {
map: map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
};
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
if (!!doc) {
// doc.markers.push(marker);
}
// Set up and create the infowindow
var infoWindowOptions = {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div>'+
'<input type="button" onclick="displayInfo(\''+placemark.name+'\',\''+placemark.description+'\');" value="populate div"></input>',
pixelOffset: new google.maps.Size(0, 2)
};
infowindow.setOptions(infoWindowOptions);
marker.infoWindowOptions = infoWindowOptions;
marker.infoWindow = infowindow;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function() {
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
placemark.marker = marker;
return marker;
}
Add a function to display the data in an external div:
function displayInfo(name,description){
document.getElementById('info').innerHTML = name+"<br>"+description;
}
working example