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);
}
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 the following code to draw a polyline on Google map. I want to initialize the map in a separate function and draw polyline in another. When I put their codes in separate functions, things don't work for me. Can anyone tell me how to separate polyline and map initialization?
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
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,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
You may separate out the code for drawing polyline and call this function from idle listener registered during map initialization.
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.
I recently found an example which uses fusiontablelayer to show routes on a map and I wonder how could I style my normal polylines to have shadows like these: http://gmaps-samples-v3.googlecode.com/svn/trunk/fusiontables/cycletrails.html Those looks really, really nice and I cant find an solution to do it with my polylines. (example of polyline without shadow: https://google-developers.appspot.com/maps/documentation/javascript/examples/polyline-simple)
Thnx in advance!
You could do something like this:
http://www.geocodezip.com/v3_GoogleEx_polyline-simple_shadow.html
(put a thicker transparent polyline under yours, looks like what I see them doing)
You could probably get the same effect the same way by using a KmlLayer or a FusionTablesLayer, rather than native Google Maps API v3 Polylines.
Code:
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var mapOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
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 flightPathShadow = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: 'black',
strokeOpacity: 0.1,
strokeWeight: 10
});
flightPathShadow.setMap(map);
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
Those trails are painted on custom tiles, for example:
http://mt0.googleapis.com/mapslt?hl=en-US&lyrs=ft%3A132848|h%3Afalse|s%3Aselect%2520geom%2520from%2520132848%2520where%2520distance%2520%253C%252092&x=83&y=199&z=9&w=256&h=256&source=apiv3&token=125180
Hi I want to display flight paths in Google maps. I have the geo coordinates and want to create something like this on this image: http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/02/flightarrivals.png?54167
Has anyone a good example? Is this possible?
Thanks
Nik
What about the API docs?
http://code.google.com/apis/maps/documentation/javascript/overlays.html
You can add markers, lines, text etc. All described in the API.
Example shamelessly grabbed from the docs on how to draw a polyline on a map:
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
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);
}
There are lots more examples on the Google pages.