fabioweb

Google map width on click

16 posts in this topic

Hi there.

Thanks for using our extensions.

Let me explain a little.

When page is loaded, the map is initialized with its container width.

This width is fixed.

So when you expend the container, the map's width doesn't change

You need to "order" browser calculate the map's width again.

In javascript function that you use for the button, please add this code

jQuery(window).trigger('resize');

I hope it will help you.

Good luck.

Share this post


Link to post
Share on other sites

Hello,

thanks to you for your reply and for this extensions..

I've tried in this way but not working.. I wrong something?

$(".zoomappa").click(function() {

jQuery(window).trigger('resize');

$('.zoomappa').hide();

$('.bt-googlemaps').width("710");

$('.bt-googlemaps').animate({width:'710px'}, 500);

$('.bt-googlemaps').animate({height:'640px'}, 500);

$('.nozoomappa').show();

});

Share this post


Link to post
Share on other sites

One more idea.

please open file /mod_bt_googlemaps/tmpl/default.php

Find this line

$script = 'window.addEvent(\'domready\', function(){';

change it to

$script = 'var config, boxStyles, markersCode, stylesCode;';

$script .= 'window.addEvent(\'domready\', function(){';

Then find these code

var config

var boxStyles

var markersCode

var stylesCode

remove all "var"

Now, change your script to call this function

initializeMap(config, markersCode, stylesCode, boxStyles);

I hope it will help you.

Share this post


Link to post
Share on other sites

Thank you very much. I did all your steps..

About changing my script is this right?

$(".zoomappa").click(function() {

$('.zoomappa').hide();

$('.bt-googlemaps').animate({width:'710px'}, 500);

$('.bt-googlemaps').animate({height:'640px'}, 500);

$('.nozoomappa').show();

initializeMap(config, markersCode, stylesCode, boxStyles);

});

Share this post


Link to post
Share on other sites

Oh no

I mean your script must be Loaded after the module's files not in files

Example Bt google maps has default.js file

You can see it loaded on in your page source with this markup

<script type="text/javascript" src="...default.js"></script>

Your code can be anywhere on the page but it must be loaded after above markup.

Example

<script type="text/javascript" src="...default.js"></script>

<script type="text/javascript">

... your code

</script>

You can do anything but the code should be in this order.

Share this post


Link to post
Share on other sites

Ok thank you for your support and patience.

i can confirm that the code is loaded after BT google map script

<script type="text/javascript" src="...default.js"></script> LINE 34

<script type="text/javascript" src="...script.js"></script> LINE 75

It still not working..

Share this post


Link to post
Share on other sites

One more idea :D

You should show the map with full width a bit when the page load to let browser calculate full width first.

Then you change its width to smaller after about 300 ms

Example.

You show the module full width at the initialization.

Then you use this function

setTimeout(function(){ $('.bt-googlemaps').width(500);}, 300);

After pageloaded, the map will be change to smaller intermediately without animation after 300ms

It is very shot time. It is fast enough to make visitors can't see.

:D

Share this post


Link to post
Share on other sites

Hi there.

Do you use address for markers or coordinate?

If you use address please try to set them by coordinate to solve Over query limit.

If you use coordinate, i am afraid of that you must upgrade your google account to business because at the moment, your site has many request to google.

Share this post


Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now