is this the correcty way to change the add Overlay to v3? In V3 addOverlay is deprecated...and replaced with setMap?
if (setContainerVisible == 1) {
mapElements[lMapElementIndex]['visible'] = 1;
//map.addOverlay(marker); v2
marker.setMap(marker); // v3 ??
}
for more infos see the whole source http://pastebin.com/w1nm0W75 (line: 507)
Not quite, there is actually a number of ways you can do it. The simplest, and what you're probably looking for is
marker.setMap(map);
You can also initialize the map it supposed to be bound to when initializing your marker variable in the markerOptions.
Take a look at this document, it describes the methods and approaches to add markers and other overlays in V3: https://developers.google.com/maps/documentation/javascript/overlays#AddingOverlays
Related
How can I best zoom to group of points in google maps api v2? In api v3 I would use bounds object to store the points and then zoom to these bounds using fitBounds() function, but in v2 I really don't know.
I found some advice here, but the solution of writing custom function seems quite clumsy...
http://groups.google.com/group/Google-Maps-API/browse_thread/thread/996f83e075e51fdf
Try this mini tutorial, it sounds like what you want:
http://econym.org.uk/gmap/basic14.htm
var bounds = new GLatLngBounds();
for (... each point ...) {
bounds.extend(latlng);
}
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
http://econym.org.uk/gmap/example_map14.htm
I'm wondering if it's possible to set markers to be visible in a chosen zoom level for the
Google Map API v3.
I figured it's possible in the v2 of the API using the "Marker Manager" but can't find a way for the latest API.
Example:
Marker-1 -> (max_zoom:10, min_zoom:5) //will on be shown within zoom level 5-10
Marker-2 -> (max_zoom:15, min_zoom:10) //will on be shown within zoom level 10-15
As I'm developing an jQuery-plugin I only want to use the original API without add-ons.
Thanks in advance!
Supposing map is the object instanced to manage the gmap, i'd do something like this:
var zoomLevel = map.getZoom();
if (zoomLevel>=5 && zoomLevel<=10) {
// call the setMarker function for the marker1
} else if (zoomLevel>10 && zoomLevel<=15) {
// call the setMarker function for the marker2
}
Maybe u want to handler the zoom change event, if so look at this: http://code.google.com/apis/maps/documentation/javascript/events.html
You can use Marker Manager with API v3. The examples in http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/ use the most recent Maps API and they seem to work just fine.
For other options, like Marker Clusterer and Fusion Tables, see http://code.google.com/apis/maps/articles/toomanymarkers.html.
You can also do it by checking the zoom level and adding/removing markers from the map based on that, as suggested by #lucke84 in their answer.
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 ??