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
Related
Google Maps circle looks like hand drawn.
Circle script is:
var circle = new google.maps.Circle({
center: myLatLng,
radius:1000,
strokeColor: "#000000",
strokeOpacity:1,
fillOpacity:0.4,
strokeWeight: 2,
fillColor: "#000000",
map:map
});
Can we make the circle more fine tuned.
My requirement is to show circle around marker with fine tuned circle border.
You could try using a symbol. I don't believe there's an option to change those circles from using the "hand-drawn" style. It's odd because their rectangles don't seem to be using that look.
Here is an example :
https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-predefined
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var myCircle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: 0.8,
scale: 20,
strokeColor: 'black',
strokeWeight: 3
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: myCircle,
map: map
});
}
Here is an example of a circle around a marker :
function initialize() {
var myLatlng = new google.maps.LatLng(16.5083,80.64);var mapOptions = {zoom: 12,center: myLatlng};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var marker = new google.maps.Marker({map: map,position: myLatlng});
var circle = new google.maps.Circle({
map: map,
radius: 2000,
fillColor: '#000000',
fillOpacity: 0.4,
strokeColor: '#000000',
strokeWeight: 2
});
circle.bindTo('center', marker, 'position');
}
google.maps.event.addDomListener(window, 'load', initialize);
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 have following issue with drawing a polygon with google maps api. It looks like that there is to much fillColor. The center of the following polygon is not supposed to have fillColor.
Is it google maps API or is it me who has a bug?
Example: http://jsfiddle.net/zCA2u/
$(function(){
var shape;
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var coords = [
new google.maps.LatLng(31.50362, -70.0488),
new google.maps.LatLng(29.91685, -62.4023),
new google.maps.LatLng(22.91792, -56.42578),
new google.maps.LatLng(22.67484, -69.6972),
new google.maps.LatLng(27.29368, -74.8828),
new google.maps.LatLng(33.06392, -73.3007),
new google.maps.LatLng(34.23451, -66.0058),
new google.maps.LatLng(32.32427, -58.2714),
new google.maps.LatLng(26.35249, -56.4257),
new google.maps.LatLng(18.81271, -60.64453),
new google.maps.LatLng(20.13847, -69.4335)
];
shape = new google.maps.Polygon({
paths: coords,
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
draggable: true,
fillColor: '#ff0000',
fillOpacity: 0.35
});
shape.setMap(map);
});
I have now tried the above in IE8 and it renders correct in IE8
If you want to make "holes" in polygons
they aren't supported by the drawing manager directly
you need to have separate paths (the polygon "paths" property takes an array)
the inner paths (the "holes") need to wind in the opposite direction from the inner path
simple example of a polygon with a hole (a donut)
fiddle with self intersection removed and hole
var coords = [
[ new google.maps.LatLng(27.29368, -74.8828),
new google.maps.LatLng(33.06392, -73.3007),
new google.maps.LatLng(34.23451, -66.0058),
new google.maps.LatLng(32.32427, -58.2714),
new google.maps.LatLng(26.35249, -56.4257),
new google.maps.LatLng(18.81271, -60.64453),
new google.maps.LatLng(20.13847, -69.4335)
],
[
new google.maps.LatLng(21.534847,-63.28125),
new google.maps.LatLng(30.221102,-59.677734),
new google.maps.LatLng(30.600094,-71.279297)
]
];
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);
}
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.