Geek Answers Handbook

Jquery gmap3 - calculate center point and scale several dynamically created marker coordinates - google maps api 3

Basically I am trying to determine how to set the auto scaling and auto center function for my #map_div div. But since my markers are dynamically generated, somehow I need the zoom and center to work automatically based on the width and height of my #map_div

But as you can see in my gmap3 script that I have to determine the scale and center manually, and not cool.

I found this script fragment below, but I can’t see how to associate it with my .gmap3 script. Is there any way to integrate it with my .gmap3 jquery script plugin?


Calculation of the center point var ...

 // map: an instance of google.maps.Map object // latlng: an array of google.maps.LatLng objects var latlngbounds = new google.maps.LatLngBounds( ); for ( var i = 0; i < latlng.length; i++ ) { latlngbounds.extend( latlng[ i ] ); } map.fitBounds( latlngbounds );

Found above script here


My .gmap3 script below ...

 jQuery(function($) { $('#map_div').gmap3({ action: 'init', options: { center: [50.799019, -1.132037], zoom: 5, scrollwheel: false } }, { action: 'addMarkers', markers: [{ lat: 50.799019, lng: -1.132037, data: 'Test One'}, { lat: 50.365162, lng: -4.712017, data: 'Test Two'}, { lat: 54.518726, lng: -5.881054, data: 'Test Three'}, { lat: 52.780964, lng: -1.211863, data: 'Test Four'}, { lat: 51.433998, lng: -2.549690, data: 'Test Five' }], marker: { options: { draggable: false } } }); });


I usually do jsfiddle, but the site is down.

Any help with this would be so great.

+4
source share
2 answers

Try using autofit ?

http://gmap3.net/en/catalog/16-misc/autofit-58

This function extends the borders of maps to add each added overlay (markers, circle ...)

 $('#test').gmap3( { circle:{ options: { center: [37.772323, -122.214897], radius : 2500000, fillColor : "#008BB2", strokeColor : "#005BB7" } } }, "autofit" );
0
source

Here is how I did it, you can access the coordinates of the markers in the “marker” callback and use them then to center the map and automatically launch it with fitBounds:

 $('#map_canvas').gmap3({ map: { options: { zoom: 9, center: [view.lat, view.lng] }, marker : { values : markersArray, options : { draggable : false }, callback:function(m) { //m will be the array of markers var bounds=new google.maps.LatLngBounds(); for(var i=0;i<m.length;++i) { bounds.extend(m[i].getPosition()); } try{ var map=$(this).gmap3('get'); map.fitBounds(bounds); map.setCenter(bounds.getCenter()) }catch(e){} } } } });
0
source

More articles:


All Articles