I have a mysql table with a series of lat/lng points being written to an xml file and imported to google maps as points. This seems to be working fine, but rather than simply marking them with a point I'd like to generate a polyline between each of them. In looking at the developer docs, I noticed that the example iterates through creating a new latlng object for each line/ set of points. Is there a way I can dynamically call a series of points to generate multiple lines from my database? Sorry if this seems like an obvious fix- I'm a bit new to the maps api. Thanks in advance!
The output XML file I'm using looks something like this:
Location name="2012-04-01 12:28:18" lat="42.9523010667" lon="-78.8189444333"/
Location name="2012-04-01 12:28:06" lat="42.95219345" lon="-78.81931905"/
Location name="2012-04-01 12:27:54" lat="42.9522356" lon="-78.8192848667"/..... etc
HTML/ Script Calling the XML coords into the map:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(42.9521, -78.8198), 20);
GDownloadUrl("gmaps_genxml2.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("Location");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("timestamp");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lon")));
var marker = createMarker(point, name);
map.addOverlay(marker);
}
});
Code snippet in question on developers.google doc:
var flightPlanCoordinates = [
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 flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2});
flightPath.setMap(map);}}}
function createMarker(point, name) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
I'm currently not showing any errors in the console. This is how I've attempted to implement the two previous code snippets from the original post, but I'm not getting the map to display any lines/ points. Might it be the way I'm defining the point variable/ it is not storing the array, but a single point?? I've tried using [] in defining "point" as well- but this didn't work/ didn't show any errors either...
function load() {
if (GBrowserIsCompatible()) {
// Create an instance of Google map
var map = new GMap2(document.getElementById("map"));
// Tell the map where to start
map.setCenter(new GLatLng(42.9521, -78.8198), 20);
GDownloadUrl("gmaps_genxml2.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("Location");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lon")));
var polyline = new GPolyline(point, '#ff0000', 5, 0.7);
map.addOverlay(polyline);
}
});
}}
google-maps
