I have a map on my website and I'd like to make some paths on it from kml files. I found geoxml3, and I have this code:
<script type="text/javascript" src="geoxml3.js"></script>
<script type="text/javascript">
var geoXml = null;
var map = null;
var myLatLng = null;
function initialize() {
var mapOptions = {
//stuff
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
geoXml = new geoXML3.parser({
map: map
});
geoXml.parse('paths/path1.kml');
};
</script>
It's from the documentation sample. Now I want to retrieve the path by accessing some property of geoXml, but my browser's debugger claims it's undefined, even though the markers that define the points of the polyline from the kml file show up on the map. How do do draw a path from a file, not necessarily using this method?
Here's the file:
http://pastebin.com/R1PsuumL
I want to create the path from the coords in Folder/Placemark/LineString/coordinates.
Here is your KML rendered with geoxml3.
Related
I have to load KML file in browser.And I have load simple KML file it works perfectly but when I upload the KML file with multiple folder for images it is not loading properly.
Code of line used:-
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>"></script>
<script>
var mylocation = {
'latitude': -45.2427303,
'longitude': 115.0639984
};
var map;
function initialize()
{
var myLatlng = new google.maps.LatLng( mylocation.latitude, mylocation.longitude );
var mapOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var kmlPath = '<?php echo urldecode($file_name)?>';
var urlSuffix = (new Date).getTime().toString();
var layer = new google.maps.KmlLayer(kmlPath + '?' + urlSuffix );
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
KMLLayer generates map tiles in Google's server side. For the reason, multiple KMLLayer (and fusion tables layer also) do not work as you expected sometimes.
This is not described in the official document, but this comes from my experience.
I recommend you use GeoJSON with DataLayer.
DataLayer generates overlays (marker, polyline , etc...) in client side.
And you can modify the generated overlays easily.
Check it out.
https://developers.google.com/maps/documentation/javascript/datalayer#overview
I have an application that I wrote years ago in Google Map v2 that displayed a map from a given initial lat/long and placed an icon on the map. This webpage was a form with a text box for the lat and long. The page allowed the user to drag the icon to actual location of where a wildfire was located. The new lat/long was placed into the text box and the user could submit the form. I have not found a suitable replacement in v3 for this process. And now I get an error message that a new API key is required from Google Maps. But I also know that in May that v2 may no longer work. So I would like to update this app to v3. Any ideas of where I can find this? Here is an example of the old page http://nfsdata.unl.edu/wildfire/testmap.asp The page is writen in ASP. And we do not have access to PHP on this server. Thanks
That is a very straightforward application.
Your v2 code:
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var center = new GLatLng(41.33,-96.95);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: false});
map.addOverlay(marker);
GEvent.addListener(map, "click", function(overlay, point) {
if (overlay) {
map.removeOverlay(overlay);
} else {
map.clearOverlays()
map.addOverlay(new GMarker(point));
document.getElementById("loclats").value = point.lat();
document.getElementById("loclongs").value = point.lng();
}
});
}
}
//]]>
</script>
Simple translation to v3 (not tested):
<script type="text/javascript">
//<![CDATA[
function load() {
var center = new google.maps.LatLng(41.33,-96.95);
map = new google.maps.Map(document.getElementById("map"),{
center:center,
zoom: 13
});
var marker = new google.maps.Marker({
map: map,
position:center
});
google.maps.event.addListener(marker, "click", function() {
marker.setMap(null);
});
google.maps.event.addListener(map, "click", function(evt) {
var point = evt.latLng;
marker.setPosition(point);
document.getElementById("loclats").value = point.lat();
document.getElementById("loclongs").value = point.lng();
});
}
}
//]]>
</script>
working example
I am using the Google Maps API V3 (so no embedding links) and I would like it so when the users click on one of my polygons (overlays) they don't see the white pop up balloon.
The contents of the balloon (as well as the co-ordinates) come from a KML file.
Here is what I am using to generate my map.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var paris = new google.maps.LatLng(48.8581,2.3827 );
var myOptions = {
zoom: 4,
center: paris,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var france = new google.maps.KmlLayer('france.kml?v=45', {preserveViewport:true});
var germany = new google.maps.KmlLayer('germany.kml?v=45', {preserveViewport:true});
france.setMap(map);
germany.setMap(map);
}
</script>
Change your vars that load the KML's to something that looks like this:
var kmlLayer;
var kmlURL = 'http://www.yourwebsite.com/mapFileName.kml';
var kmlOptions = {
clickable: 0, // polygon ignores mouse clicks
preserveViewport: 1
};
kmlLayer = new google.maps.KmlLayer(kmlURL, kmlOptions);
kmlLayer.setMap(map);
I am making a map where I have the KML load and the markers load on the same canvas in which I want the boundary to be however big the markers even though the kml is on the canvas. I'm using this in conjunction with php so there's a bit of php in the code but nothing to special besides entering information for variables.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
if ($('#map_canvas').length != 0) {
var myLatlng = new google.maps.LatLng(45.266438, -93.233225);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds = new google.maps.LatLngBounds();
var kmlLayer = new google.maps.KmlLayer('<?php bloginfo('template_url'); ?>/includes/delivery-maps/mansettisdel.kml', { map: map });
var jsongeo = <?php echo(json_encode($geo_json)); ?>;
$.each(jsongeo, function(index, value) {
var latlng = new google.maps.LatLng(value.lat,value.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
bounds.extend(latlng);
map.fitBounds(bounds);
});
}
});
</script>
here is the var_dump of the json that I am looping through the lat and longitude.
string(617) "[{"type":"delivery","lat":"45.341969","lng":"-93.277657","date":"2011-07-11"},{"type":"delivery","lat":"45.005360","lng":"-93.323738","date":"2011-07-12"},{"type":"delivery","lat":"45.319408","lng":"-93.202446","date":"2011-07-12"},{"type":"delivery","lat":"45.131786","lng":"-93.216576","date":"2011-07-13"},{"type":"delivery","lat":"44.804131","lng":"-93.166885","date":"2011-07-13"},{"type":"delivery","lat":"45.119965","lng":"-93.287727","date":"2011-07-13"},{"type":"delivery","lat":"42.358433","lng":"-71.059776","date":"2011-07-13"},{"type":"delivery","lat":"34.195915","lng":"-84.507317","date":"2011-07-13"}]"
Now I'm not having issues with the markers going through but just the bounds. I don't know if there is something other I would have to do with the lat,long but I read up on this a ton and can't find a thing.
Here is what is showing up.
What shows up
Here is what I would like to show up.
What I want to show up
Even though the KML is on the map I would like the markers to be the bounds. Is there something that google maps does that sets it to the KML or do I have the bounds done incorrectly? I notice it goes to the bounds view and then RIGHT to the KML view.
Try adding the option preserveViewport: true to the KML options so it reads:
var kmlLayer = new google.maps.KmlLayer('<?php bloginfo('template_url'); ?>/includes/delivery-maps/mansettisdel.kml', {
map: map,
preserveViewport: true
});
That should stop it zooming it into the KML bounds.
http://code.google.com/apis/maps/documentation/javascript/reference.html#KmlLayerOptions
EDIT 4
All this while I was thinking that it is the markers problem, that they do not get dragged!
Now I have realized, that NO mouse click works on the map when it is displayed in Qt widget.
The following code, I pasted in an HTML file and opened through Firefox, this worked flawlessly! and the same doesn't respond when I click on the map on QtWidget :rolleyes:
Can anyone confirm this for me or tell me what wrong I am doing?
Google Maps JavaScript API Example
<script type="text/javascript">
var map;
var latlng = new google.maps.LatLng (34.7607233, -117.0107599);
var directionsDisplay = new google.maps.DirectionsRenderer ();;
var directionsService = new google.maps.DirectionsService ();
var pointsArray = new Array();
var arrayToBeReturned = new Array();
function initialize ()
{
var myOptions =
{
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map (document.getElementById ("map"), myOptions);
directionsDisplay.setMap (map);
google.maps.event.addListener (map, "click", function ()
{
alert("You clicked the map.");
});
}
</script>
</head>
<body onload="initialize()" topmargin="0" leftmargin="0">
<div id="map" style="width: 341px; height: 271px"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
</body>
</html>
You are looking at the wrong place for the events :) In the references each object have their own events. You can see the ones for markers here:
[http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker][1]
I have used the dragend event plenty of times and it works smoothly.
The code to do it could be:
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function () {
document.getElementById("txtLatitude").value = marker.getPosition().lat();
document.getElementById("txtLongitude").value = marker.getPosition().lng();
});
[1]: http://code.google.com/apis/maps/documentation/javascript/reference.html#Markermap = new
Found the solution:
Add this class in the source file where you are "loading" the HTML file (containing Javascript API) in the Qt widget.
class myWebPage : public QWebPage
{
virtual QString userAgentForUrl(const QUrl& url) const {
return "Chrome/1.0";
}
};
Then in your own class in the same source file, add the setPage function call as shown below and see the magic happen!
MainScreen::MainScreen(QWidget *parent):QWidget(parent)
{
...
***map->setPage (new myWebPage());***
map->load (QUrl("./index.html") ) ;
};
google.maps.event.addListener (initialPointMarker, 'click',
function () { map.closeInfoWindow(); });
How about single quotes around the click arguement