I'm searching for a way to draw a polyline via google maps v3. Once complete be able to edit the polyline and then continue drawing the same polyline.
I've read much about the DrawingManager (introduced in 3.7) and read much of the API of V3 found here:
https://developers.google.com/maps/documentation/javascript/overlays#drawing_tools
Which shows the example of this:
https://google-developers.appspot.com/maps/documentation/javascript/examples/drawing-tools
The developers.google example is great and allows the user to draw and complete the polyline by clicking on the last vertex. But once it's complete I cant seem to find out how to continue drawing on the same polyline. Is this possible?
I know that Google Maps API is up to version 10 (Frozen). I've even looked in their Release and Experimental versions but there's no talk of it there.
I would be open to any suggestions.
Issue created with Google: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5213
Hope it gets more "likes"
PolylineOptions in DrawingManagerOptions ignores the path atribute. So what you could do is to draw a new polyline between the end of the las polyline and the begining of the new polyline when it is drawn (on polylinecomplete event).
google.maps.event.addListener(drawingManager, 'polylinecomplete', function(event) {
if (event.type == google.maps.drawing.OverlayType.POLYLINE) {
//save last point
//draw a new polyline to join last final point and this first point if this isn't the first polyline
}
});
Hope it helps
Related
I want to be able to obtain coordinates of the vertices of a polygon bounding a particular area (locality) in Google maps.
For eg. if I enter :
HSR Layout ( a locality in Bangalore, India) in Google maps it shows a polygon bounding the area.
I found out its not possible with Google Maps Api v3, but use of KML layers might help. Can someone please explain this.
If the KML data is available online, then you can access it using google.maps.KmlLayer. Please see an example here (you will probably understand it; it is a very simple example): https://developers.google.com/maps/documentation/javascript/examples/layer-kml.
//make an instance of google.maps.KmlLayer, using the URL with the desired KML data.
var ctaLayer = new google.maps.KmlLayer({
url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'
});
//set the KmlLayer to a map
ctaLayer.setMap(map);
Again, the usage of this function is very simple.
I have a google map displaying a polyline. I can detect mouseover events for the whole line, but I want to catch these events on the line-segment level. Is there a way to do this while still using just one polyline?
I think that is not possible since the google maps polyline object is really just one.
Is there any easy ways to find the bounding box of a polyline using Google Maps API v3? I'm working on a project where I need to update the bounds as data is added and removed from the map. This is pretty easy by just doing bd.extend(point) where bd is the bound object and point is a LatLng object. The problem is when I start removing data I would like it to change the bounds and zoom back in. Are there any built in functions that can do this or will I need to write something for myself?
Expanding on oenpelli's solution, this is the extended getBounds() method that I am using to recreate the functionality from V2 API. This is working perfectly in my project.
google.maps.Polyline.prototype.getBounds = function() {
var bounds = new google.maps.LatLngBounds();
this.getPath().forEach(function(item, index) {
bounds.extend(new google.maps.LatLng(item.lat(), item.lng()));
});
return bounds;
};
Just remember that this needs to be added AFTER the API javascript is loaded, so in your init method.
The v2 API had the GPolyline.getBounds() method to do exactly this. However it appears that there is no equivalent method in the v3 API.
You may want to handle this by overriding the changed property of your Polyline MVCObject in order to be notified when the object changes state. Then you can calculate the bounding box using the LatLngBounds.extend() method that you suggested.
I think Google intentionally omitted such methods from the v3 API in an attempt to keep the API lightweight. A similar omission discussed a couple of days ago on Stack Overflow was the GMap2.clearOverlays() method.
You can also extend the Polyline class to add your own getBounds method. Refer to google maps api v3: add point on polyline beetwen two existing points on click polyline event for how to do this.
In Google Maps API v2 we can set to marker an option bouncy:true. It adds to marker eye-candy ability - after dragging this marker, it is bouncing.
Is it possible to do in API v3 ?
Here's how you do it in V3
google.maps.event.addListener(marker, "dragend", function(){
marker.setAnimation(google.maps.Animation.BOUNCE);
});
I just had a quick look at the API v3 spec for Markers - it doesn't look like the 'bouncy' option is available right now but I wouldn't be surprised to see this get implemented into the v3 API at some point - it's still in Beta and bound to change quite a bit.
Here is a link to the API v3 Reference on the available Marker Options
If you really wanted the behavior in a V3 Map now you could tie an event to the 'dragend' method on the Marker Object. Have the function called alter the anchor point of the MarkerImage object - check out the MarkerImage object in the API too.
Well, I was looking for a way for implementing bouncy markers in V3 of google maps so that if we are showing a cluster of markers, the currently selected marker should be visible clearly.
We used the z-index property of the marker to set the z-index of the current marker at a relatively higher value than the rest.
I want to create an overlay on top of Google Maps that displays different streets in different colors.
In the Google Maps API it is possible to create markers and polygons that cover certain areas.
Is there a way to somehow mark different streets?
It sounds to me like you are interested in showing some application specific coloring for your Google maps display (rather than traffic maps).
If so , then you should check out custom overlays. You can create your own transparent background overlay tiles (with your colored streets), match them up with the Google maps tiles and then overlay them on the map. You can find a description of this stuff in the Maps API reference - Overlays.
I have actually been interested in trying this out, and this question might be a good excuse. I'll let you know how I go.
Edit: Ok, I tried this and it was pretty straightforward. You just need to grab the tiles images when the google maps page load (for the area you would like to overlay). Make sure you keep track of the origional urls, because these have the x,y coordinates that you will need to write your tile overlay method.
Edit the tiles with your colored roads then upload them to your web server. Add the following code to use your overlay on the regular map:
var myCopyright = new GCopyrightCollection("© ");
myCopyright.addCopyright(new GCopyright('Demo',
new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
0,'©2007 Google'));
// Create the tile layer overlay and
// implement the three abstract methods
var tilelayer = new GTileLayer(myCopyright);
// properties of the tile I based my tile on
// v=w2.97&hl=en&x=38598&s=&y=49259&z=17&s=Galil.png
tilelayer.getTileUrl = function(point, zoom) {
if (zoom == 17 && point.x == 38598 && point.y == 49259)
return "../pics/times_square.png";
};
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.75740, -73.98590), 17);
map.addOverlay(myTileLayer)
This code overlays my Thing eats NY tile:
at x = 38598 and y = 49259 at zoom level 17.
It is possible to create markers and polygons in the Google Maps API. You need to create GPolygon and/or GPolyline objects
Have a look to these tutorials
And if you want to obtain the coordinate (latitude, longitude) of certain streets, you may have a look to the source code of this page
I am not sure to fully understand your question: do you want to mark some given streets ?
in that case, a quick-and-dirty way could be to get the coordinates of all the addresses of the street and build a GPolygon according to them...
Have you concidered using OpenStreeMaps?
Try digging into the code used to show the traffic overlay on the normal Google Maps site.
Edit: I just looked at the code, and it appears that even Google decided it was easier to implement this by just generating the traffic lines on the server and pulling them down as transparent PNG overlays.
I just found this link, and I think this could interest you. It is a JavaScript package that provides functionality for displaying multiple routes on Google Maps.
Is it what you were looking for ??