html - JQuery FancyBox with Google Maps -


i able print map using drupal code in div. map appear inside fancybox , hidden on website. i've managed (fancybox works ok) map not displayed correctly - there no navigation , grey empty area inside map (though google logo there). have idea wrong here? guess might case id renders 1 element, renders background , rest ignored, honest have no idea(use class instead). advice appreciated. thanks

my code:

<script type="text/javascript">     $(document).ready(function() {      $("a#inline").fancybox({     'hideoncontentclick': true,     'overlaycolor'      : '#ccffee',     'overlayopacity'    : 0.8     }); });  </script>

link show map:

<a id="inline" href="#mapcontainer" > show map </a>

actual div prints map (works when set visible)

<div style="display:none"> <div id="mapcontainer"> <?php print $node->content['field_maploc']['field']['items']['#children'] ?> </div></div>

the php code generates following html:

<div style="width: auto; height: 400px;" id="openlayers-container-openlayers-map-auto-id-0" class="openlayers-container openlayers-container-preset-question_map"> <div style="width: auto; height: 400px;" id="openlayers-map-auto-id-0" class="openlayers-map openlayers-preset-question_map"></div> </div>

the current output - output

it seems issue (bug?) when google maps initialized in hidden div (can same case when using tabs) since display:none may set width , height 0.

when inline map visible, fancybox able compute dimensions, hence works when remove display:none.

the workaround should resizing map once fancybox opened map fit fancybox dimensions. can use oncomplete callback that.

other things bear in mind:

  • you may need set autodimensions either true or false depending on whether selector #mapcontainer has css dimensions or not (set false if not, otherwise set true.) think has dimensions since can display map inline initial value true.
  • since using inline content (fancybox v1.3.x) beware of this bug. same link shows workaround.

so fancybox custom script should like:

 $("a#inline").fancybox({   'hideoncontentclick': false, // can handle map   'overlaycolor'      : '#ccffee',   'overlayopacity'    : 0.8,   'autodimensions': true, // selector #mapcontainer has css width , height   'oncomplete': function(){     google.maps.event.trigger(map, "resize");   },   'oncleanup': function() {    var mycontent = this.href;    $(mycontent).unwrap();   } // fixes inline bug  });

the method resize map might different depending on version of google maps api using

you can check https://stackoverflow.com/a/2590049/1055987 further reference.

update: have added demo here


Comments

Post a Comment

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

i need display gallery of photos. here template: @(photos: list[photo]) @title = { <bold>gallery</bold> } @main(title,"photo"){ <ul class="thumbnails"> @for(photo <- photos) { <li class="span3"> <a href="#" class="thumbnail"> <img src="@photo.path" alt=""> </a> </li> } </ul> } and here controller method: public static result getphotos() { return ok(views.html.photo.gallery.render(photo.get())); } and here photo bean : @entity public class photo extends model { @id public long id; @required public string label; public string path; public photo(string path, string label) { this.path = path; this.label = label; } private static finder<long, photo> find = new finder<long, photo>( long.class, photo.class); public static list<phot...
Read more

gmail - Is there any documentation for read-only access to the Google Contacts API? -

i want read-only access user's google contacts. there stackoverflow member wanted this, , received following answer : yes, there is, use https://www.googleapis.com/auth/contacts.readonly scope , "view contacts". this exchange reference read-only access google contacts can find using google. simply using access token obtained attempt read usual google contacts api (i.e. https://www.google.com/m8/feeds ) fails insufficient permissions. similarly, using google contacts api on new target fails 404 errors (for example https://www.googleapis.com/auth/contacts.readonly/default/full ). is there documentation anywhere on how use api, or permissible way access google contacts api full read-write access?
Read more

php - Controller/JToolBar not working in Joomla 2.5 -

relevant code: jtoolbarhelper::custom('savecategories', 'save', '', 'save', false, false); ... <input type="hidden" name="controller" value="easyblogcontroller"> according can dig docs , own previous questions, should call savecategories() function in easyblogcontroller . i've tried setting value easyblog , easyblog.php (file name) current easyblogcontroller (class name). clicking on save button refreshes page. not redirect, echo or var_dump test code put in savecategories() function. var_dump ing jrequest::getvar('controller') , 'task' return correct values. creating controller object , using $controller->execute('task'); works. the values going depend on location of controller trying call, , have couple options here. typically there controller in base folder of component (likely components/com_easyblog) in file called controller.php , class name inside ...
Read more