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.
Related
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 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
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);
}
i am new to stackoveflow, can any one help me to how to draw a rectangle using google api v3, i went through some examples on google i got the below code,
function initialize() {
var coachella = new google.maps.LatLng(33.6803003, -116.173894);
var rectangle;
var myOptions = {
zoom: 11,
center: coachella,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
rectangle = new google.maps.Rectangle();
google.maps.event.addListener(map, 'zoom_changed', function() {
// Get the current bounds, which reflect the bounds before the zoom.
var rectOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
bounds: map.getBounds()
};
rectangle.setOptions(rectOptions);
});
}
But, it functions on zoom event(zoom chanages),i want simple with out event,please help me
map.getBounds() may return not the desired bounds when called to early(immediately after the instantiating of the map).
You may use tilesloaded instead
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
/*your code*/
});
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.