I am trying to create polygons with Data from a XML file. I have never used polygons before and I have studied the Google Map doc examples to get the base features down but the examples don't even work. I tried to merge it with other things I have learned and used to create markers and poly lines but I am missing something and now not only do the polygons not show but the map doesn't even show. I start with base code to display the map and start from there. Once I started adding the code to build the polygon it causes the map to not load. I know I am missing something but I am not sure what exactly since I have never used polygons before.
You can view an example of the XML file I am using for the data. The cords to create the polygons are in a element called "cap:polygon".
http://www.mesquiteweather.net/xml/warnings.xml
Here is the code I have so far...
<script type="text/javascript">
var lineColor = {
"Tornado Warning": "#FF0000",
"Severe Thunderstorm Warning": "#FFFF33",
"Flash Flood Warning": "#00FF00",
};
var infowindow = new google.maps.InfoWindow();
// start here
var thisurl = 'xml/warnings.xml';
function initialize() {
var myLatlng = new google.maps.LatLng(32.775833, -96.796667);
var myOptions = {
panControl: false,
zoom: 5,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
function MyLogoControl(controlDiv) {
controlDiv.style.padding = '5px';
var logo = document.createElement('IMG');
logo.src = 'http://www.mesquiteweather.net/images/watermark_MW_GMap.png';
logo.style.cursor = 'pointer';
controlDiv.appendChild(logo);
google.maps.event.addDomListener(logo, 'click', function() {
window.location = 'http://www.mesquiteweather.net';
});
}
var logoControlDiv = document.createElement('DIV');
var logoControl = MyLogoControl(logoControlDiv);
logoControlDiv.index = 0; // used for ordering
map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);
var eventWarnings;
downloadUrl(thisurl, function(data) {
var polygon = data.documentElement.getElementsByTagName("feed");
var warningCoords = new google.maps.LatLng(cap:polygon),
});
// Construct the polygon
eventWarnings = new google.maps.Polygon({
paths: warningCoords,
strokeColor: lineColor[cap:event],
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: lineColor[cap:event],
fillOpacity: 0.35
});
eventWarnings.setMap(map);
}
</script>
I am stuck at this point and not sure what I am missing. If anyone can offer some advice or suggestions that would be great!
-Thanks!
This is incorrect (I would expect it to give you a javascript error):
var warningCoords = new google.maps.LatLng(cap:polygon)
A google.maps.LatLng takes two numbers as an argument. You need to parse the coordinates out of the XML feed, convert them into google.maps.LatLng objects, push them into an array, then provide that array as the paths property in the google.maps.Polygon constructor.
Related
Here is the code I have so far:
function initialize() {
var mapOptions = {
center: { lat: 21.9072222, lng: -47.715},
zoom: 3
};
var map = new google.maps.Map(document.getElementById('derby-to-lima'),
mapOptions);
var line = new google.maps.Polyline({
path: [new google.maps.LatLng(53.9834124, -1.5863153), new google.maps.LatLng(-12.0553442, -77.0451853)],
strokeColor: "#008CBA",
geodesic: true,
strokeOpacity: 0.5,
strokeWeight: 5,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I want to draw another line on top of the existing one that stops at the point in between the two points, which can be changed by percentage. It's kind of hard to explain, but imagine the first point is the start, and the last is the end. You are given how far a runner currently is by the percentage of the way through they are. Now show how far they are (assuming they ran in a straight line).
Thanks, I've been stuck on this for a while.
As suggested by #Dr.Molle load the geometry library and use the method interpolate.
var startPoint = new google.maps.LatLng(53.9834124, -1.5863153);
var endPoint = new google.maps.LatLng(-12.0553442, -77.0451853);
var percentage = 0.5;
var middlePoint = new google.maps.geometry.spherical.interpolate(startPoint, endPoint, percentage);
FIDDLE
I'm using geoXMl3 to parse multiple kml files at a time.
I'm getting polygons plotted on the map. when I click on the polygon an info-window pops up. I'm not getting from where this info-window is coming up
My requirement is I want to edit the content of info-window through some java-script object
My java-script object will be like
popUpDetails = {'district-name':'content'}.
Not getting how to pass this in my parser
I have refered few links like:
https://code.google.com/p/geoxml3/wiki/Usage
and also how could I put data dynamically from database in infowindow of a certain polygon?
I'm parsing kml files this way:
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var parser = new geoXML3.parser({
map: map,
processStyles: true,
zoom: false,
});
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < ListofPathsofkmlfiles.length; i++) {
parser.parse([ListofPathsofkmlfiles[i]]);
}
Advance thanks for your help
I have finally figured out solution for same.
You need to overwrite createPolygon attribute of your parser for same.
var districtInfoMap = {doc_url1:infowindow_content1, doc_url2:infowindow_content2 };
var parser = new geoXML3.parser({
createPolygon: mapDrawingToType(),
map: map,
processStyles: true,
zoom: false,
singleInfoWindow: true,
});
mapDrawingToType = function() {
return function(placemark, doc) {
var polygon = geoXML3.instances[geoXML3.instances.length-1].createPolygon(placemark, doc);
if(polygon.infoWindow) {
polygon.infoWindowOptions.content = districtInfoMap[doc.baseUrl];
}
return polygon;
}
}
Here I have made one object containing the map of district url and window content you have to show.
This will overwrite the default behavior of how your infowindow is displayed and the desired content you want to show will be displayed.
If you still face any issue please do let me know.
I want to develop an application for tracking in maps,in that i want to show moving object without reloading the whole page depending on co ordinates. Can anyone suggest me how to do so?
Where is the information about moving objects?
Is it a real time system or only a simulation?
In any case you can try polling server to get the new coordinates few times per second using JS, and update marker location on the map.
EDIT
Below you have working example of moving object without polling taken from google tutorial (https://google-developers.appspot.com/maps/documentation/javascript/examples/full/overlay-symbol-animate). What you need to change is the way of obtaining coordinates.
var line;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(20.291, 153.027),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#393'
};
line = new google.maps.Polyline({
path: lineCoordinates,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map
});
animateCircle();
}
function animateCircle() {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 20);
}
google.maps.event.addDomListener(window, 'load', initialize);
I am new at Google Map applications. I have read an article about Polyline Arrays (https://developers.google.com/maps/documentation/javascript/overlays#PolylineArrays). In the example, it created a dynamic arrays using Event Click. My question is, is it possible that i can create a polyline in an array variable not on a click event?
Here is the code from google documentation:
var poly;
var map;
function initialize() {
var chicago = new google.maps.LatLng(41.879535, -87.624333);
var mapOptions = {
zoom: 7,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
* #param {MouseEvent} mouseEvent
*/
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
I have made some of my own code:
<script>
var line;
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(0, -180),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var path = [new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856)];
line = new google.maps.Polyline({
path: path,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
line.setMap(map)
}
function addNewPoint(position) {
var path = line.getPath();
path.push(position);
}
''''' I create a single variable for a new path.
var NewPath = [new google.maps.LatLng(-27.46758, 153.027892)];
addNewPoint(NewPath);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
And when i run it. It does not work. Thank you for any response.
I think you need to change this:
var NewPath = [new google.maps.LatLng(-27.46758, 153.027892)];
addNewPoint(NewPath);
to this:
var NewPath = new google.maps.LatLng(-27.46758, 153.027892);
addNewPoint(NewPath);
So you only pass through a LatLng point, rather than an array containing one. So it corresponds more closely to the example you gave,
path.push(event.latLng);
I'm writing a code that I can click in the map, parse the info to google maps route for me and save the LatLng in my Data Base. That part, it's ok, it's working. The second part of my page will be render the LatLng that its in my Data Base. Here comes the problem: How do I create an object like google retrieves me when I ask for a route(DirectionsResult Object or DirectionsRoute)? If what I'm trying to do it's wrong, please somebody tell me how to do it right.
Thanks.
You might want to take a look at google api playground: http://code.google.com/apis/ajax/playground/#polylines_v3
This example is for printing routes:
function initialize() {
var mapDiv = document.getElementById('theMapCanvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(0, -180),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var path = [new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)];
var line = new google.maps.Polyline({
path: path,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
line.setMap(map);
}