I have been trying to render my KML service in the google maps by the following.
var ctaLayer = new google.maps.KmlLayer({
url: 'http://DomainName/GeoSystem/redrawKML'
});
ctaLayer.setMap(map);
But I am getting undefined as a result with ctaLayer object when i have checked the status.
But the same service is working good, If i have tried to parse the KML service with geoXML parser. Now, I am confused and having no idea . Why I can not render my KML Service with the google maps KML Layer in google maps.
Any help is much appreciated.
My Woring code with GeoXML library follows.
var geoXml = new geoXML3.parser({
map : map,
singleInfoWindow : true
});
geoXml.parse('http://DomainName/GeoSystem/redrawKML');
The following is My KML Content which will be produced by my rest service ( http://DomainName/GeoSystem/redrawKML)
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:ns2="http://www.google.com/kml/ext/2.2" xmlns:ns3="http://www.w3.org/2005/Atom" xmlns:ns4="urn:oasis:names:tc:ciq:xsdschema:xAL:2.0">
<Document>
<name>My KML Document</name>
<Placemark>
<name>Fort Worth</name>
<open>1</open>
<description>Fort Worth , Dallas</description>
<ExtendedData>
<Data name="GeoRegionId">
<value>1</value>
</Data>
<Data name="PolygonId">
<value>132</value>
</Data>
</ExtendedData>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>-97.47551,32.778615 -97.45079,32.79651 -97.437744,32.798242 -97.420578,32.806322 -97.417145,32.813824 -97.34848,32.843251 -97.338867,32.842674 -97.317581,32.838635 -97.292862,32.838058 -97.264709,32.839212 -97.229691,32.840943 -97.207718,32.831135 -97.206345,32.814978 -97.211838,32.802859 -97.212524,32.758985 -97.224884,32.739927 -97.225571,32.716822 -97.240677,32.691977 -97.239304,32.667125 -97.245483,32.661922 -97.281876,32.6625 -97.304535,32.668859 -97.334061,32.663656 -97.380066,32.671749 -97.402725,32.684464 -97.459717,32.683308 -97.47139,32.695444 -97.478943,32.720288 -97.482376,32.741082 -97.47551,32.778615
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Document>
</kml>
Got the answer.
If KMLLayer of google maps API3 has to display contents, The KML File should be in PUBLICALLY ACCESIBLE. Then only the google server can parse the file and will render it in the google maps.
Since I am developing in my local environment. Google Server can not parse the KML File which i am providing. That is why the contents are not rendered in the Google maps.
Have you checked the KML limits of Google Maps API v3 ? If you surpass the limit on feature quantity or file weight, then nothing will be displayed.
Edit:
I uploaded your kml to my public dropbox folder. And I'm loading it fine with
var fortw = new google.maps.KmlLayer({
url: 'https://dl.dropboxusercontent.com/u/3133731/fortworth.kml',
map: map
});
Related
I have a question about the googleMaps Javascript API. Is it possible to create a custom Layer that you can show/hide like the given layers such as traffic and bicycle layer?
I would like to have a own Layer for my Markers and another Layer for polygons.
thanks in advance
I understood of your question that you would like to create a custom layer on your web site. You also need to change the layer informations at any time.
Google maps api provides KML and GeoRSS data formats for "displaying geographic information".
We are going to introduce KML format.
You may create a KML file witch provides the informations for your layer. You can find an example of KML file here. Of course, you can edit this file any time on your server.
This is an example of editing a file on php:
$file = file_get_contents($_SERVER['DOCUMENT_ROOT']."/yourKLMFile.txt");
$file= str_replace("OldValue", "NewValue", $file);
echo ($file);
You also can provide personal data for your users or simply update your layer.
Next, JS.
Google maps api provides the KmlLayer() constructor witch creates your layers and display it on the map (since you have created it).
The constructor takes two important parameters:
The URL of your KML file (probably on your server);
The map in witch you want to display the layer.
This is a sample example:
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
This is a sample code spinnet wich resume all this:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 41.876, lng: -87.624}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
}
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
Remember that you can always update your data file in php.
You may consult the documentation about KML layer and generally google maps' layers on google maps web site.
Tell me a comment if you have some questions
I wonder, is it possible to connect a db to google maps api to render polygons, points etc?
If a store all kml coordinates connected to polygons, will it be possible to render it fra database or do i need to create a kml file to visualize it?
Is there any example?
Thanks!
A KML file is not required to visualize points, polygons, etc using Google Maps API. However, the KML layer is a useful way to represent complex geospatial features.
A backend database with HTTP access could return a list of map coordinates that your client code can render into appropriate shapes using Google Maps API.
The Google Maps API provides examples to create various shapes.
Example to create simple point marker:
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Example to create simple polygon:
https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
The client code will need to query the data from the database such as from a servlet with access to the database. Database will most likely be running on a different port or from a different server so javascript won't be able to access it directly.
Your server-side component could query a database and return formatted KML or it could return a JSON result that your client code would render. Depends on whether you want to write more backend server code or JavaScript code on the client.
hmmm... I am using another solution now (data from DB to show on Google earth which is default application for KML file) and hope this help :
( may refer to https://sites.google.com/site/canadadennischen888/home/kml/auto-refresh-3d-tracking )(plus, in my other page, there is sample java code)
Details as :
prepare a RestFul service to generate KML file from DB (KML sample as inside above link)
My other jsp code will generate a KMZ file which has a link to my Restful service. KMZ file has onInterval ( as in the bottom)
Jsp web page allow user to download KMZ file.
When Google Earth open KMZ file, Google Earth will auto refresh to get new data from that Restful service
Everytime refreshing, server will send the latest update KML data with new data to GE.
KMZ sample:
<?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">
<NetworkLink>
<name>Dennis_Chen_Canada#Hotmail.com</name>
<open>1</open>
<Link>
<href>http://localhost:9080/google-earth-project/rest/kml/10001/20002</href>
<refreshMode>onInterval</refreshMode>
</Link>
</NetworkLink>
</kml>
result as :
Thanks for you're answer. I don't know if i get somewhat wiser of this, but at least i know that it is possible.
I have used Shape2Sql to save the coordinates in the database.
But as i understand, i need someway to convert this to geojson before it can render in Google maps? if i understand correct?
As i understand to render geojson is mostly the same as to render kml when it comes to files. But i don't know how to Connect to a database.
I make a list from database:
var adresses = _unitOfWork.GeoAddressRepository.Get(q => q.GeoRouteNorpost.Code == "3007106", includeProperties: "GeoRouteNorpost").ToList();
var points = new List<LatLong>();
foreach (var address in adresses)
{
points.Add(new LatLng() { Lat = "59.948261", Lng = "10.750699" });
points.Add(new LatLng() { Lat = "59.943128", Lng = "10.755814" });
points.Add(new LatLng() { Lat = "59.941245", Lng = "10.746084" });
points.Add(new LatLng() { Lat = "59.943527", Lng = "10.742786" });
points.Add(new LatLng() { Lat = "59.946824", Lng = "10.744435" });
points.Add(new LatLng() { Lat = "59.946813", Lng = "10.744446" });
points.Add(new LatLng() { Lat = "59.947107", Lng = "10.748241" });
points.Add(new LatLng() { Lat = "59.947827", Lng = "10.749525" });
points.Add(new LatLng() { Lat = "59.948248", Lng = "10.750699" });
}
This example show a polygon on a map. But i'm not sure how to get this coordinates out of the database and how to solve it when it is serveral polygons.
As i have written, i have saved the coordinates in the db With shape2Sql. So now i have a Field for geometry. If i look at the spatial result in sql server this looks correct. But how can i display this in Google maps?
I am grateful for all help:)
I'm working on a Dart app that heavily relies on Google Maps. How does/should one populate a Google Maps info window from within a Dart app?
Four approaches come to mind: Dart string interpolation (the string being HTML code), "templating" or web components or Polymer or...
The prototype (snippets below) does nothing more than placing "foo bar" in the info window.
My Marker class
var markerOptions = new JsObject.jsify({...});
_marker = GoogleMapsApi.newMarker(markerOptions);
GoogleMapsApi.getEventContext().callMethod('addListener', [_marker, 'click', (event) {
map.openInfoWindow(_marker, 'foo bar');
}]);
My Map class
openInfoWindow(JsObject marker, String content){
_infoWindow.callMethod('setContent', [content]);
_infoWindow.callMethod('open', [map, marker]);
}
Sidenote: GoogleMapsApi is my own helper class dealing with Google Maps JavaScript interop, I plan to replace it with Dart Google Maps.
I am having an issue with Google Maps not displaying my program generated KML file (see that question). My question is if there is a way to turn on more verbose errors so I can see if there is an error with my program generated KML file or if there is a different issue.
Specifically for KML layers, set a listener for the status_changed event and display the layer's status:
var newKml = new google.maps.KmlLayer({
url: VALID_KML_URL_HERE
});
newKml.setMap(map);
google.maps.event.addListenerOnce(newKml, 'status_changed', function () {
console.log('KML status is', newKml.getStatus());
});
I want to create a Google map with user uploaded Geotagged photos that show up on my map. I can easily create manipulate my map but I can't seem to find instruction on how to add these geotagged photos.
Here is an example of what I am try to accomplish:
http://maps.google.com/?ie=UTF8&ll=26.892794,-80.055909&spn=0.003875,0.004828&t=h&z=18&lci=lmc:panoramio
I don't have experience working with photos, but I don't think it should be really any different than placing a GMarker on the map at the appropriate coordinates of your photo, and then in the info window of the tag you would output your custom HTML which would include your photo.
Edit: Specific link leading to the GMarker class in the Google Maps API Reference: http://code.google.com/apis/maps/documentation/reference.html#GMarker
You need to create a tile, then create a tile overlay.
var tilelayer = new GTileLayer(myCopyright);
tilelayer.getTileUrl = function() { return "../include/tile_crosshairs.png"; };
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addOverlay(myTileLayer);
The documentation is here, with a great sample map here.
You could use PHP (or another script) to create a KML or GeoRSS file (much like Flickr's KML and GeoRSS feeds) and have the Google Maps API function GGeoXML load the file as an overlay on the map.
See Google's example code here: http://code.google.com/apis/maps/documentation/examples/geoxml-rss.html
That example is actually loading a live GeoRSS feed from Flickr.