1

Google maps - set zoom based on markers

asked 2010-09-20 08:24:45 +0800

gul gravatar image gul
22 2

Hello,

I've added a gmaps component to my zul page and in java code I adds some markers based on latitude and longitude I get from database.

I would change map zoom so that all markers are visible.

I've found some javascript codes to do that but I don't know how to implement it using zk gmaps component.

This is gmaps component in zul page


<gmaps id="mymap" width="706px" height="300px" showSmallCtrl="true">

Here is the JS code:



function extendBounds(lat, lng) {
	
		alert("I'm here:" + lat + "-" + lng);
		
		var point = new GLatLng(lat,lng);
				
		map = new GMap2(mymap);
		
		bounds = map.getBounds(); 
		
		bounds.extend(point);
		map.setZoom(map.getBoundsZoomLevel(bounds)); 
		map.setCenter(bounds.getCenter()); 
	}

and here is the java code I use to add the marker and to call the js function:


new Gmarker(content,Double.parseDouble(latitude), Double.parseDouble(longitude)).setParent(mymap);
Clients.evalJavaScript("extendBounds(" + Double.parseDouble(latitude) + "," + Double.parseDouble(longitude) + ");");

Using Clients.evalJavascript, the javascript function is executed but the problem is that I'm not able to access the maps object.

Any suggestion?

Many thanks,
Giovanni

delete flag offensive retag edit

10 Replies

Sort by ยป oldest newest

answered 2010-09-20 20:11:13 +0800

samchuang gravatar image samchuang
4084 4

Hi,

you can refer to zk demo gmap sample code, from the code, you can use gmarker

link publish delete flag offensive edit

answered 2010-09-21 03:10:31 +0800

gul gravatar image gul
22 2

Hi,

I already use Gmarker to add a point to the map. The problem is that I would center and zoom the map so that all markers are visible.

Thanks

link publish delete flag offensive edit

answered 2010-09-22 19:44:22 +0800

samchuang gravatar image samchuang
4084 4

Hi

you can refer to the javadoc of the gmap, there is functuion: setCenter(double lat, double lng)

link publish delete flag offensive edit

answered 2011-03-21 01:47:39 +0800

alonsolai gravatar image alonsolai
6

From 2010 Sep, to now has already pass half year. Is this still no solution?
How to get the Javascript Object?
Is there new function for setCenter(lat,lng,RoomLelvel) + getBoundsZoomLevel(bounds) in ZK gmap library?

link publish delete flag offensive edit

answered 2011-03-21 20:09:12 +0800

samchuang gravatar image samchuang
4084 4

Hi @alonsolai

refer to the javadoc of zk gmap

link publish delete flag offensive edit

answered 2011-03-22 09:27:54 +0800

alonsolai gravatar image alonsolai
6

I just saw in setCenter(lat,lng) setZoom() in org.zkoss.gmaps.Gmaps of javadoc.
I don't see any function(like map.getBoundsZoomLevel(bounds)) for get ZoomLevel From a specific Bound.
In Google Map there is a function which can get the suitable zoom level for Gmarkers located in the specific bound region. Therefore, we can see all Gmarkers in the same map.
I have read several times of javadoc and still cannot find a function like the "map.getBoundsZoomLevel(bounds)". Do you have any suggestion function?

link publish delete flag offensive edit

answered 2011-03-22 20:00:34 +0800

samchuang gravatar image samchuang
4084 4

is Gmaps.getZoom() what you want ?

after search online, "getBoundsZoomLevel" is API 3, I think current zk gmap is API 2 set, you can post feature request here

or, someone mentioned online, we can implement by our self

link publish delete flag offensive edit

answered 2011-05-04 06:26:21 +0800

AlanSmith gravatar image AlanSmith
39 1

I had the same problem, so had a hunt around google to find out how I could implement it myself and came up with this.

1. Create the map
2. Add all the Gmarkers
3. Call the static method scaleMap passing in the map object


    private static void scaleMap(Gmaps map) {

        Double minLat = null;
        Double maxLat = null;
        Double minLng = null;
        Double maxLng = null;

        // Work out the minimum and maximmum latitude and longitude
        //
        for (Object o : map.getChildren()) {
            if (o instanceof Gmarker) {
                Gmarker g = (Gmarker) o;

                if ((minLat == null) || (g.getLat() < minLat)) {
                    minLat = g.getLat();
                }

                if ((maxLat == null) || (g.getLat() > maxLat)) {
                    maxLat = g.getLat();
                }

                if ((minLng == null) || (g.getLng() < minLng)) {
                    minLng = g.getLng();
                }

                if ((maxLng == null) || (g.getLng() > maxLng)) {
                    maxLng = g.getLng();
                }
            }
        }

        // No markers found, so don't bother scaling
        if (minLat == null) {
            return;
        }

        // Calculate the centre Lat and Long
        //
        Double ctrLng = (maxLng + minLng) / 2;
        Double ctrLat = (maxLat + minLat) / 2;
        
        // The next calculation is sourced here http://aiskahendra.blogspot.com/2009/01/set-zoom-level-of-google-map-base-on.html
        // I have no idea what it's actually doing !!!
        //
        Double interval = 0.0;
        
        int mapDisplay = 600;     // Minimum of height or width of map in pixels

        // Some sort of tweak !
        if ((maxLat - minLat) > (maxLng - minLng)) {
            interval = (maxLat - minLat) / 2;
            minLng = ctrLng - interval;
            maxLng = ctrLng + interval;
        } else {
            interval = (maxLng - minLng) / 2;
            minLat = ctrLat - interval;
            maxLat = ctrLat + interval;
        }

        Double dist = (6371 * Math.acos(Math.sin(minLat / 57.2958) * Math.sin(maxLat / 57.2958) + (Math.cos(minLat / 57.2958) * Math.cos(maxLat / 57.2958) * Math.cos((maxLng / 57.2958) - (minLng / 57.2958)))));

        // Note ... original calc used 8, but I found it worked better with 7
        Double zoom = Math.floor(7 - Math.log(1.6446 * dist / Math.sqrt(2 * (mapDisplay * mapDisplay))) / Math.log(2));

        // Centre the map
        map.setCenter(ctrLat, ctrLng);

        // Set appropriate zoom
        map.setZoom(zoom.intValue());
    }
 

link publish delete flag offensive edit

answered 2011-05-04 20:07:24 +0800

samchuang gravatar image samchuang
4084 4

Hi, @AlanSmith

thanks for sharing your code

link publish delete flag offensive edit

answered 2016-01-29 13:32:19 +0800

jaronovich gravatar image jaronovich
1

To 'scale' the map is easy: no need for such elaborate calculations. Just find simple arithmetic average of your gmarkers and set center to that value. I usually create a 'center' marker that is placed on map too.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-09-20 08:24:45 +0800

Seen: 1,994 times

Last updated: Jan 29 '16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More