Geocoder responsive

Hi Carole,

The example code that is provided for the geocoder plugin doesn't have responsive design, the HTML/CSS is kept as simple as possible to make the functionality of the plugin clear. 

However I was able to make some quick changes to the provided template pages to make the map have basic responsive behaviour. I removed the default styling from the map_canvas DIV (this is where the map is loaded):

<div id="map_canvas"></div>

Then I added the following CSS into a style tag:

  #map_canvas{
    width: 100% !important;
    height: 400px !important;
  }

This will make the map have a height of 400px, but its width will depend on the width of the page its on. 

Let me know if you have any questions.

Cheers!

Greg 

Hi Greg

Thanks for that.  Just purchased the Geocoder, which is great,but I am only getting the top corner of the map location at www.focus10.com.au/courses2.php?1 rather than the full map.   I have attached a screen grab of the problem.  Any ideas how to fix this?

Hi Carole,

This is a problem related to the Javascript framework you're using (Bootstrap, and specifically Bootstrap Tabs) and Google Maps. Because the tab with the map is hidden when the page first loads, the map has trouble displaying itself. I think a solution may be to trigger a 'resize' event on the map when the tab is shown, as described here:

https://github.com/twbs/bootstrap/issues/2330

If that doesn't help, you may find more information with this search -- it seems like this is a very common problem for Bootstrap users: https://www.google.com/search?q=bootstrap+tab+google+map

Hope this helps!

Hi Carole,

Can you attach the courses.php file so we can take a look or if your prefer, send it in to support@interactivetools.com.

Thanks!