Changing default Zoom level on Google Maps in web apps maps module

[mario_gudelj]

Sometimes you may want to change the zoom level on the Google map rendered by the Web Apps map module. The default zoom level is set to 10, but Google provides levels from 1 -16.

To render a map you need to insert a map module into a page, which looks like this:

{module_webappsmap,4682,a,,ABQIAAAAFpzxY6IeWCvvzZBuZgZEFRScORB2vu23Xe0GmXrkmbsnDwR-VhR9W-Y43KrBb8dE8sVMwbyjiM8sMw,600,600,-1}

To change the zoom level all you have to do is add the following code below the maps module on the page:

<script>
CMS.Maps.map.setZoom(14);
</script>

Where 14 is a zoom level.

[Guest]

Great
Is it also possible to add the default long. and lad.? For some reason I don't understand, my starting position is in the Atlantic Ocean, and my items are located in Denmark so it's a bit astray...
Please see for yourself at http://smykkekaeden01.businesscatalyst.com/butikker-1

Thanks
/Shanne

[Guest]

I found the solution at https://developers.google.com/maps/documentation/javascript/v2/introduction#Map_DOM_Elements

<script>
	CMS.Maps.map.setCenter(new GLatLng(56.13330691237569, 10.755615234375), 7);

</script>

[greetingsfromhelvetica2]

<script>
CMS.Maps.map.setZoom(14);
</script>

This JS code doesn't change anything with map zoom level at all. The map just continues to zoom to the maximum level of 16 which is useless as you can't even see one street at max zoom.

[gina3five]

I agree with greetingsfromhelvetica2. The CMS.Maps.map.setZoom(14); doesn't seem to have any effect. Anything else we can do while using the webappsmap module? Zoom level should be added as a parameter to the tag.

[SmilingGoat]

I have the same issue as per greetingsfromhelvetica2 and gina3five

If I look at the source of the rendered page, the suggested script sits outside the google map script - does that matter?

<div><script src="//maps.googleapis.com/maps/api/js?v=3&sensor=false&key=AIzaSyDsCR3uJk0Glt1bz2_NuFOLyuG3aORgYsU" type="text/javascript"></script><script src="/CatalystScripts/gmaps.js" type="text/javascript"></script><div id="webapp_map_1451" style="height: 400px; width: 400px;"></div><script type="text/javascript">

var webapp_map_1451_gmap2 = CMS.Maps.Initialize({id:"webapp_map_1451",width:400,points:[[0,0,1,"Allium","\n","11 Teed Street,Auckland,,,NZ"]]});</script>

<br />

<script>CMS.Maps.map.setZoom(10);

</script>

</div>

Does anyone have a solution to this problem?

Cheers

[Cody_McCulloch]

Just in case anyone else comes across this, you may need to set a timeout to make sure the map is finished initialising before setting the zoom level.

<script>setTimeout(function() { CMS.Maps.map.setZoom(14) }, 800);</script>