I use kmz branch of geoxml3 to simple render geo date from kmz file. But it works not well. Placemarks are rendering fine, but I cant see any overlays. This is my code:
$doc->addScript($this->baseurl.'/components/com_google_map/assets/ZipFile.complete.js', 'text/javascript');
$doc->addScript($this->baseurl.'/components/com_google_map/assets/geoxml3.js', 'text/javascript');
$doc->addScript($this->baseurl.'/components/com_google_map/assets/ProjectedOverlay.js');
<script type="text/javascript">
google.load("earth", "1");
var myMap;
var minZoomLevel = 3;
var geoXml;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(55.01, 82.85),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
myMap = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
geoXml = new geoXML3.parser({map: myMap, afterParse: showGeoData});
geoXml.parse('/components/com_google_map/soil_moisture/soil.zip');
}
function showGeoData(doc) {
console.log(doc);
geoXml.showDocument(doc);
};
</script>
And this is kml:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Document>
<name>Soil_Moisture</name>
<description>Retrieved soil moisture value
SM_OPER_MIR_SMUDP2_20120916T130233_20120916T135546_551_001_1</description>
<GroundOverlay>
<name>Raster data</name>
<visibility>1</visibility>
<LatLonBox>
<north>90.0</north>
<south>-90.0</south>
<east>180.0</east>
<west>-180.0</west>
<rotation>0</rotation>
</LatLonBox>
<Icon>
<href>overlay.png</href>
</Icon>
</GroundOverlay>
<ScreenOverlay>
<name>Legend</name>
<Icon>
<href>legend.png</href>
</Icon>
<overlayXY x="0" y="1" xunits="fraction" yunits="fraction" />
<screenXY x="0" y="1" xunits="fraction" yunits="fraction" />
</ScreenOverlay>
</Document>
</kml>
Both of png files were included at kmz. And there are no errors or warnings in console.
Could anyone help?
P.S. Sorry for my english.
Related
I'm trying to render some simple kml layers on a Gmaps API project, but I'm finding that, despite anything I try, polygons doesn't fill.
I load a KML layer with this code:
var kmlLayerCenter = new google.maps.KmlLayer('<kmlFileRoute>', {
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
And this is the KML code:
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document id="root_doc">
<Folder>
<name>Distrito_Centro_KML</name>
<Placemark>
<Style>
<LineStyle>
<color>ff0000ff</color>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<color>ff0000ff</color>
<outline>1</outline>
</PolyStyle>
</Style>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-5.67256283331951,43.5397440536399
----- LOTS OF POINTS ------
-5.67256283331951,43.5397440536399
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Folder>
</Document>
</kml>
The polygon renders ok with red border, but there isn't any fill color. I tried to touch values here and there inside the KML, but to no success.
Any help will be appreciated.
Ok, Incredible but true... it seems that points on KML layers should be ordered counter-clockwise to allow Gmaps API to render fill colors.
I don't understand completely why is this, but it seems to work fine.
I found info about the solution here, although geocodezip answer was more or less on the same direction it wasn't until I reverse every point in the coordinates string that fill color appeared.
Looks like the Google Maps KML renderer is now sensitive to winding direction (which you didn't provide in your question).
This works:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
var kmlLayerCenter = new google.maps.KmlLayer({
url: 'http://www.geocodezip.com/geoxml3_test/kml/SO_20181122b.kml',
suppressInfoWindows: true,
// preserveViewport: true,
map: map
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<coordinates>
-5.67256283331951,44.5397440536399
-5.9439,45.254695
-5.408402,45.284535
-5.67256283331951,44.5397440536399
</coordinates>
This doesn't:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
var kmlLayerCenter = new google.maps.KmlLayer({
url: 'http://www.geocodezip.com/geoxml3_test/kml/SO_20181122.kml',
suppressInfoWindows: true,
// preserveViewport: true,
map: map
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<coordinates>
-5.67256283331951,44.5397440536399
-5.408402,45.284535
-5.9439,45.254695
-5.67256283331951,44.5397440536399
</coordinates>
The only difference is winding direction (the order of the middle two points)
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 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
I am using geoxml3 to parse a kml file of points. On click of the marker an info window opens with some description. The problem is that the information is being displayed misplaced and also two links are added in the info window which I want to remove.
Any ideas how I can remove the links and also put the information placed correctly?
This is a screen shot of the info window:
The following is the code I am using:
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
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);
directionsDisplay.setMap(map);
elevator = new google.maps.ElevationService();
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
google.maps.event.addListener(map, 'click', getElevation);
}
function displayKml() {
initialize();
parser = new geoXML3.parser({
map: map,
processStyles: true,
createMarker: addMyMarker,
createOverlay: addMyOverlay
});
parser.parse("Uploads/" + document.getElementById('<%= text2.ClientID %>').value);
}
function addMyMarker(placemark) {
parser.createMarker(placemark);
}
function addMyOverlay(groundOverlay) {
parser.createOverlay(groundOverlay);
}
The kml file structure is as follows:
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>route</name>
<Placemark>
<name>210</name>
<description>St james cavalier,Exhibitions centre</description>
<Point>
<coordinates>14.5107742,35.8955498</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Your sample KML works fine with my test pages:
polys branch:
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/SO_IT_info_kmlPt.xml
kmz branch:
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmztest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/SO_IT_info_kmlPt.xml
Must be your css (which you haven't provided) or something else in your environment.