Google Map Not Responsive

Hi, How do I make the google map on the location responsive? When I look at the event detail on my mobile phone, the map looks cut off on the screen but looks fine on the laptop.

businesswomenscommunity.com/index.php/ev...-jobs-presents-20-20

Thanks,
karen

After taking a quick look at your site, I'm wondering if this might be a limitation in the way that Google Maps is called via Javascript. It looks to me like the script requires the width to be declared in pixels, and If this is part of Google's API, then it might not be changeable.

As a possible work-around, you could set the Map Width value in [ EB -> Configuration -> General tab -> near the bottom of Registration Settings ] to a smaller value that will look better on mobile despite it being smaller for desktop users. I tried playing with CSS declarations, but the Javascript width variable seems to be the ruling factor.

@Tuan: is it possible to use a different API or to be able to adjust this value dynamically using javascript/jquery, reload the map using JSON and using Google's iFrame "embedded map" approach, or something else comepletely?

Thanks James for your effort. Honestly, I leave this map plugin development to a dev in my team and haven't reviewed the code yet (I works on more important parts in the extension)

The map should be responsive. Please help submitting a support ticket so that I can ask my developer to check it for you (I will review the code when I have some free time, right now, still have many things I want to add to the extension)

Tuan

Hi there

Please navigate to [DOMAIN]/plugins/eventbooking/map and find the file map.php.
Edit map.php and replace line 265. Change it as follows:

OLD
NEW
If you want to change height, too, feel free to do so

Regards

Hi everyone

I've not been satisfied with the solution provided in my last post, so I looked for an alternative.

I found a smooth way to convert the Google map from the plugin into a responsive one without having to change a single line of code in the source-files.

Just follow these steps:
1. Navigate to your EB Dashboard / component
2. Click on "Configuration" / "Custom CSS"
3. Put in the following line of code into the designated field: #map_canvas {width:100% !important; height: 400px;}
4. Adjust values for height and width as desired, you could i.e. put in values in px for width, too. Or a value in % for the height.
5. Save&close

That's it!

ENJOY

IMPORTANT: Leave the map plugin enabled!

Thanks Kemper

Actually, our map plugin handle responsive in a different way;

1. If you access to the event page from mobile, it is responsive by default
2. If you resize your browser to a smaller size, it won't be responsive

I guess #2 is the reason you need to add some custom css like this. Thanks for sharing the solution

Regards,

Tuan