I am really new to google maps and need some help.
I am calling a 3rd party api that requires a polygon to return markers.
I am not sure how to do this. Basically I want to be able to pass in a LatLong and return a polygon based on the window size and zoom level.
Is this possible?
Thank you for your time.
Sounds like the app needs the bounds of the map viewport.
Look at the documentation for the getBounds method of the google.maps.Map class.
Related
I am using google maps in order to give some directions from one point to another.
Although, I have set the zoom of the map to 15 the zoom changes after the response of the direction request in order probably to fit the directions into the map.
Does anyone nows how to keep the zoom constant at 15. and focus at the first point?
See the documentation for the DirectionsRenderer
preserveViewport: true
will prevent the DirectionsRenderer from changing the zoom.
To center the map on the first point use the map.setCenter function. You will need to parse the response from the directions service and create a google.maps.LatLng object for the first point.
This example shows one way to parse the response:
http://www.geocodezip.com/v3_directions_custom_iconsC.html
(you don't need everything, just the location of the point you want to center on)
The LatLngBounds function needs the corner points!
How to find the boundary points with center and zoom level given?
Is there Google API V3 which achieves this?
Or can this be done someway with the static maps?
Are you referring to the boundary points of the visible map? If so, you can use the getBounds method of the map object.
var llb = map.getBounds();
If you are using the geocoder, it returns a suggested viewort (that is a google.maps.LatLngBounds() object).
See this similar question:
Google Maps API zoom after setcenter
If you only have the center coordinates and the zoom, use them to initialize the map, listen for the bounds_changed event, then use the map.getBounds() function.
All of the above are described in the documentation
I'm working in a Java Me application that uses google static maps. The problem is that I need to get the zoom and center that fits all markers, and I need to add some labels in some coordinates on the map. How can I do this? I need a function in the server or in the midlet to get this parameters, I can't use javascript.
You don't need to calculate it on your own.
When you supply markers, usually the map will have a viewport to show all markers.
To modify the viewport use the visible-parameter.
Referring to the comments:
Pseudo-Code for calculating the center from a couple of Points:
latitude: (maxLatOfAllPoints+minLatOfAllPoints)/2
longitude:(maxLngOfAllPoints+minLngOfAllPoints)/2
I have had the same problem. Don't use "&zoom=xx" in your url, the map will auto-fit for all your markers!
Define bounds object
bounds = new google.maps.LatLngBounds();
When you create and place marker on the map extend bondes with marker position.
bounds.extend(mPosition);
where mPosition is a google new google.maps.LatLng(0,0) object, the same that you use during marker creation.
at the end ot you can create a link for click or just run.
map.fitBounds(bounds);
That is it.
I'm looking for a way to generate complex Placemarks (or overlays that are "attached" to placemarks).
Is there a way (I haven't found it) with the Map v3 api to attach/overlay a on placemark?
Or, will I need to draw outside of the Google api and then have listener/s that trigger redrawing when the user pans the map?
You extend google.maps.OverlayView with an object that override onAdd(), draw(), and onRemove()
In onAdd you'll probably want to set up a reference to a pane in google.maps.MapPanes to put your markup into. Then you'll have to handle the pan and zoom events. You do that like so:
CustomOverlayView.prototype.initPanes = function() {
var panes = this.getPanes(); //object of type google.maps.MapPanes
this.drawPane = jQuery(panes.floatPane); //we will initialize our stuff in this div element
this.drawPane.attr("id", "map-draw-pane"); //conceivable to want to reference this, usefull for debugging
this.drawPane.css("background-color", "transparent"); //DONT COVER THE GOOGLE COPYRIGHT
};
In order for your canvas to be useful for drawing, you need a way to convert your google.maps.LatLng objects into Point objects with x and y variables. The answer is in google.maps.MapCanvasProjection which has various methods that compute location objects encoded as google.maps.LatLng objects into useful pixel coordinates (and back again).
var projection = this.getProjection();//google.maps.MapCanvasProjection
var drawingLocationPoint = projection.fromLatLngToContainerPixel(markerData.location);
Some details of how to put a canvas in google maps here: http://www.samedwards.net
This is easily done, so I'm sorry an answer didn't appear sooner. Hopefully this is still useful to you.
See:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays
And here's an example:
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-simple.html
You need to implement a Javascript class which extends OverlayView. Specifically, you will write a draw() method that the Maps API will call whenever the state of the map has been changed (e.g. it has been dragged or zoomed).
In that method you can create a HTML5 canvas (or anything really) and draw whatever you need. You get access to the underlying map projection, which lets you reliably convert LatLngs to pixels for the current zoom level and projection type.
I would recommend looking at this semi official extension library for creating a canvas overlay:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/canvaslayer/
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/canvaslayer/examples/hello2d.html
as well as this sample, which uses raphael instead, but shows how you might associate your additional objects with markers:
http://gmaps-samples-v3.googlecode.com/svn/trunk/cloud/cloud.html
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.