Set zoom after loading KmlLayer?

[Robbie]

Hey everyone,

I'm new to web development, javascript, all this stuff. But I've
reviewed the Google maps references and googled this issue extensively
and just can't seem to figure it out.

I have a weather webpage and I'd like to display some radar on a
Google map. The National Weather Service offers KML of their radar so
I've linked to that. I'm displaying radar from Lake Charles and
Slidell, Louisiana. The radar images display properly, however, the
map acquires the zoom and center properties of the KML files. I'd like
to be able to force it to center on a specific location.

In my case, I'd like the map to center on Baton Rouge and be zoomed at
"7". I know that something like a "setzoom" or "setcenter" needs to go
after the "setMap(map)", but I've tried everything it seems and just
can't figure it out. I know this isn't a bug, just my ineptitude.

Here is a link to the map in action: http://www.tigerweather.com/map.html

Here is the code in question:

var map;
function initialize() {
var br = new google.maps.LatLng(30.411944, -91.185556);
var myOptions = {
zoom: 7,
center: br,
mapTypeId: google.maps.MapTypeId.TERRAIN,
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

var lchLayer = new google.maps.KmlLayer('http://www.srh.noaa.gov/
ridge/kml/animation/N0R/LCH_N0R_loop.kml');
lchLayer.setMap(map);
var lixLayer = new google.maps.KmlLayer('http://www.srh.noaa.gov/
ridge/kml/animation/N0R/LIX_N0R_loop.kml');
lixLayer.setMap(map);

}

Any and all help is greatly appreciated! Thank you!

[Rossko]

> The radar images display properly, however, the
> map acquires the zoom and center properties of the KML files. I'd like
> to be able to force it to center on a specific location.

I'd think you need to use the preserveViewport option to prevent the
KML auto-centering and overriding your intial position
http://code.google.com/apis/maps/documentation/javascript/reference.html#KmlLayerOptions

[Robbie]

Rossko,

That works like a charm! Thanks a lot!

Well it works in keeping the KML from overriding the zoom I set, but
for some reason the actual radar images aren't showing up unless I
view it on localhost... I guess that's another issue altogether. Any
insight on what could be causing that?

Is it working for you? http://www.tigerweather.com/map.html

>    http://code.google.com/apis/maps/documentation/javascript/reference.h...

[Joseph Elfelt]

Robbie,

I looked at your map but did not see radar images.

I recently dealt with a related issue involving KML files, zoom and
viewports. Here's the test map I made after I got it working.
Hopefully this will shed some light for you.

http://www.mappingsupport.com/forum_post/preserveViewport_kml_35.html

[Robbie]

Joseph,

I took a look at your document and managed to get my map working for
one of the KML files (I'm trying to display two). All I did was add
" {preserveViewport:true}" to the end of both KML files. That causes
it to be zoomed in to the correct area, but only display one KML file.

But thank you for steering me in the right direction!

[Rossko]

> Is it working for you?http://www.tigerweather.com/map.html

I get a script error in
lchLayer.setMap(preserveViewport);
you don't have a map called preserveViewport

Set the option in the initial call
... new google.maps.KmlLayer('http://www.blah/stuff.kml' ,
{ preserveViewport : true } ) ;
and setMap to your map object

[Robbie]

Thanks, Rossko.

That's actually what I did. Sorry I didn't provide a better link this
time. This is the web page in action: http://www.tigerweather.com/radar.php

Actually I believe one of the radar stations from which I was trying
to display images was just having a hiccup last night, because it's
working fine now!

Thank you all very much for your help!

And for helpful purposes if anyone needs this thread for fixing an
issue themselves later on, here is the code that made this work for
me:

var map;
function initialize() {
var br = new google.maps.LatLng(30.411944, -91.185556);
var myOptions = {
zoom: 7,
center: br,
mapTypeId: google.maps.MapTypeId.TERRAIN,
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

var lchLayer = new google.maps.KmlLayer('http://www.srh.noaa.gov/

ridge/kml/animation/N0R/LCH_N0R_loop.kml', {preserveViewport:true});

lchLayer.setMap(map);
var lixLayer = new google.maps.KmlLayer('http://www.srh.noaa.gov/

ridge/kml/animation/N0R/LIX_N0R_loop.kml', {preserveViewport:true,
suppressInfoWindows:true});
lixLayer.setMap(map);