Targeting google map

[bevels]

I’m trying to change the google map on events to display 100% but it’s proving a little tricky to target the css responsible.

According to Firebug the div the map is contained in is named “test”, so I’ve tried the following…

• #test {
  width:100%;
  }

but it doesn’t seem to work?

Thanks

[Dario]

I don’t think that you can edit the Google map using css because it’s loaded in a sandbox. All attributes must be passed in at the time that you’re creating it.

Are you using the shortcode to display the map?

If so adding the width (100% in your case) into the shortcode will do the trick.

[eo_venue_map width="100%"]
or
[event_map width="100%"]

See the shortcode documentation for more map customisations.

• This reply was modified 10 years, 5 months ago by  Dario. Reason: Added documentation link and css explanation

[Stephen Harris]

Hi Bevels,

As Dario has pointed out you can use the attributes on the shortcode. Or if you are displaying the calendar from a page template, the function eo_get_venue_map() and specify the appropriate arguments. (The codex is in need of updating), but the you can specify the width:

 eo_get_venue_map( 'my-venue-slug', array(
      'width' => '100%',
 ) );

(Full width is in fact the default so you shouldn’t need to specify that).

I’m curious abou the #test-div. As far as I’m aware the plug-in doesn’t add it around the map. The containing div should have the form eo_venue_map-{ID}.

[Author]

Posts