Advice regarding autozoom to fit 2 markers

kabeerv99

unread,

Aug 10, 2011, 4:18:45 PM8/10/11

to google-map...@googlegroups.com

Hi there,

This is my first time ever coding in any language and I have been trying to add 2 markers into google maps and set the zoom and center to have both coordinates on one screen and zoomed in as much as possible while keeping the markers on the screen.

after much research, I worked out that the code that I need to implement is:

map.fitBounds(this.map.bounds);

after putting that code in, it either didn't do anything or stopped working completely

any help would be greatly appreciated

thanks,

ps

I am a complete newb at coding and would appreciate your patience in helping me with this process.

This is the code that I have so far is (sorry for not posting a link to the code hosted publicly, this is IIS at the mo):

<!DOCTYPE html>

<html>

<head>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

src="http://maps.googleapis.com/maps/api/js?sensor=false">

</script>

function initialize() {

var lat1 = 13.51256;

var long1 = 45.43612;

var lat2 = -84.35151;

var long2 = 33.92062;

var centerlat = (lat1+lat2)/2;

var centerlong = (long1+long2)/2;

var latlng = new google.maps.LatLng(lat1,long1);

var latlng2 = new google.maps.LatLng(lat2,long2);

var myOptions = {

zoom: 1,

center: new google.maps.LatLng(centerlat,centerlong),

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById("map_canvas"),

myOptions);

var marker = new google.maps.Marker({

position: latlng,

map: map,

title:"bill"

});

var marker2 = new google.maps.Marker({

position: latlng2,

map: map,

title:"kabeer"

});

marker.setMap(map);

};

</script>

</head>

</body>

</html>

geoco...@gmail.com

unread,

Aug 10, 2011, 6:24:40 PM8/10/11

to Google Maps JavaScript API v3

On Aug 10, 1:18 pm, kabeerv99 <kabeer.vo...@gmail.com> wrote:
> Hi there,
>
> This is my first time ever coding in any language and I have been trying to
> add 2 markers into google maps and set the zoom and center to have both
> coordinates on one screen and zoomed in as much as possible while keeping
> the markers on the screen.
>
> after much research, I worked out that the code that I need to implement is:
>
> map.fitBounds(this.map.bounds);

What you probably want to do is something like (not tested):

var bounds = new google.map.LatLngBounds();
bounds.extend(marker.getPosition());
bounds.extend(marekr2.getPosition());
map.fitBounds(bounds);

in your initialize routine, after creating the markers.

-- Larry

kabeerv99

unread,

Aug 11, 2011, 4:28:23 AM8/11/11

to Google Maps JavaScript API v3

thanks for the reply but the code doesn't seem to do anything, I
suspect it is due to the fact that the zoom has already been hard
coded in but if i try and remove the line of zoom in var myoptions or
even simply not give it an integer, then it breaks the code. This is
my updated code:#

var bounds = new google.map.LatLngBounds();
bounds.extend(marker.getPosition());

bounds.extend(marker2.getPosition());
map.fitBounds(bounds);

marker.setMap(map);

};

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:500px"></div>
</body>
</html>

please help me!

thanks

kabeer

On Aug 10, 11:24 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

Rossko

unread,

Aug 11, 2011, 5:07:16 AM8/11/11

to Google Maps JavaScript API v3

> please help me!

Help others to help you, provide a live link to your webpage so that
it can be debugged easily.

You are already setting the centre with an averaging method, so we
might expect that not to change much when using a bounds method.
Your markers appear to be half a world apart, so we might expect the
map not to zoom in much.
Bear in mind the map only does integer zoom levels, there are no in-
between zoom states for a "perfect fit".

kabeerv99

unread,

Aug 11, 2011, 5:35:19 AM8/11/11

to Google Maps JavaScript API v3

I'm very sorry that I can't provide a live link because I am
developing this code for another use, this is not live yet and will
not go live until I have ironed out all of the issues and have
received the all clear from my boss. In relation to your comment about
the points being very far apart so there wont be much zoom, I take
your point but even when I choose 2 points relatively close together,
there is still no difference in the zoom levels. Thanks for your
contribution but please bear with me as I am a newb and this is the
first time I have ever even touched coding in my life.

Thanks

Kabeer

Michael Geary

unread,

Aug 11, 2011, 6:02:43 AM8/11/11

to google-map...@googlegroups.com

On Thu, Aug 11, 2011 at 1:28 AM, kabeerv99 <kabeer...@gmail.com> wrote:

var bounds = new google.map.LatLngBounds();

That won't work. Do you see how it's very slightly different from the other similar calls in your code? Different by only one letter?

You need to start learning about the debugging tools in your browser. For Firefox you can get Firebug, or the other major browsers have built-in debuggers. Any JavaScript debugger would show you the error when you tried to run that line of code.

-Mike

Kabeer

unread,

Aug 11, 2011, 6:16:38 AM8/11/11

to Google Maps JavaScript API v3

I'm sorry, I don't follow, I created the two variables called latlng
and latlng2 so there shouldn't be a problem, unless I have missed
something? I am extremely confused and would appreciate some
assistance

-kabeer

On Aug 11, 11:02 am, Michael Geary <m...@mg.to> wrote:

kabeerv99

unread,

Aug 11, 2011, 9:27:57 AM8/11/11

to Google Maps JavaScript API v3

Thanks for your reply but I don't quite follow, I haven't omitted any
letters from my variable which I previously defined, the above code
was 'var latlng = new google.maps.LatLng(lat1,long1)'. Please bear
with me, I need assistance and am unsure what to do!!

-Kabeer

On Aug 11, 11:02 am, Michael Geary <m...@mg.to> wrote:

Rossko

unread,

Aug 11, 2011, 1:16:29 PM8/11/11

to Google Maps JavaScript API v3

> Thanks for your reply but I don't quite follow, I haven't omitted any
> letters from my variable which I previously defined, the above code
> was 'var latlng = new google.maps.LatLng(lat1,long1)'.

Compare and contrast with

var bounds = new google.map.LatLngBounds();

map / maps ??

Reply all

Reply to author

Forward