WordPress.org

Ready to get started?Download WordPress

Forums

Events Manager
[resolved] Control what the map centers on (small height support) (23 posts)

  1. Daedalon
    Member
    Posted 1 year ago #

    When using the #_LOCATIONMAP with a small height, eg. 100px, the vertical centering is odd. It initially loads well, but when all other loading is done, it re-centers to a position that isn't suitable for a small map.

    How to change where a certain map (eg. one inside a certain div) centers?

    http://wordpress.org/plugins/events-manager/

  2. philipjohn
    Member
    Posted 1 year ago #

    Hiya,

    Do you have a link to your site where we can see this in action please?

    Thanks,
    Phil

  3. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 1 year ago #

    you probably need to hook into the map and do something like:

    map.setCenter(maps_markers[map_id].getPosition());
    map.panBy(40,-70);

    as per the tutorial - http://wp-events-plugin.com/tutorials/modifying-event-location-google-maps/

  4. Daedalon
    Member
    Posted 1 year ago #

    Thanks! I tried adding those the same way as what worked for some half a year at http://wordpress.org/support/topic/disable-scroll-zoom-on-google-maps?replies=12#post-3556244 for map.scrollwheel, but which didn't work anymore yesterday.

    When I added both lines above or just the setCenter one, the maps stopped loading completely. When I had just the panBy one with any values, nothing happened. Perhaps this is related to the linked issue.

    An additional challenge is to have this apply to the small maps but not the larger ones. Could that be accomplished with an if inside jQuery(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){...});? What could that if compare? The height attribute of map?

    Phil: Unfortunately we can't provide a link to a site at this point.

  5. philipjohn
    Member
    Posted 1 year ago #

    Given that it suddenly stopped working I'd first suggest deactivating all other plugins and reverting to the default theme. It may be that a Javascript conflict has been introduced.

    Cheers

  6. Daedalon
    Member
    Posted 11 months ago #

    That previous issue is fixed with code from Bettercallsaul: http://wordpress.org/support/topic/disable-scroll-zoom-on-google-maps?replies=18#post-4483221 The solution was to not use map.scrollwheel = false; and use map.set('scrollwheel', false); instead.

    Perhaps that could shed light into what to use instead of map.setCenter() (breaks all maps after the first one on the page, they stay forever gray and "Loading...") and map.panBy() (if values aren't quoted, doesn't do anything; if are, all maps stay gray without even the "Loading...")?

    Could the failing of map.setCenter(maps_markers[map_id].getPosition()); be because maps_markers[map_id] might not be set in this scope?

  7. bettercallsaul
    Member
    Posted 11 months ago #

    If you want to center map width small height i've got a solution.

    e.g. the height of single event map is 180px, width lets say 500px.

    To center map with marker add code below

    jQuery(document).ready(function($){
      $(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
    
      google.maps.event.addListener(map, 'center_changed', function() {
    		   // 3 seconds after the center of the map has   //changed, pan back to the marker.
    		   window.setTimeout(function() {
    		   map.panTo(marker.getPosition());
    		   }, 3000);
    		   });
    });

    That fixed for me!! after 3 second the map will center. You can change milliseconds if you want. I tried zero seconds, but did not work for me.

    I need help with closing infowindow map single event. It is open by default. It needs to be closed on load. Anyone a simple solution?

    I can change line below in events-manager.js

    infowindow.open(maps[map_id],maps_markers[map_id]);
    
    INTO
    
    infowindow.close(maps[map_id],maps_markers[map_id]);

    However, I want simple code that i can put in hook!

  8. bettercallsaul
    Member
    Posted 11 months ago #

    Better solution

    jQuery(document).ready(function($){
      $(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
    map.panTo(marker.getPosition());
    		   });
    });
  9. bettercallsaul
    Member
    Posted 11 months ago #

    Lol, its getting late, last code is not working. This should do the job.

    jQuery(document).ready(function($){
      $(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
    
    google.maps.event.addListener(map, 'center_changed', function() {
    map.panTo(marker.getPosition());
    		   });
    });
  10. Daedalon
    Member
    Posted 11 months ago #

    Thanks Bettercallsaul! The third (last) code centered the maps, but none of the map can be click-and-dragged. Also, they're not reloaded after recentering, so parts of the map are shown as gray.

    The first code had similar issues, but the properly displayed map parts can be clicked-and-dragged. We're getting towards resolving the issue :)

  11. angelo
    NetWebLogic Support
    Posted 11 months ago #

    maybe you can try this or atleast something like this

    jQuery(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
       window.setTimeout(function() {
          map.setCenter(marker.getPosition());
        }, 3000);
     });

    note: it centers the marker

    https://developers.google.com/maps/documentation/javascript/events

  12. Daedalon
    Member
    Posted 11 months ago #

    Thanks! Tried that, and it produced some similarly odd results. Upon loading the small (approx. 250x120) maps, their centering was now off more than before, and parts were shown gray. Typically, the rightmost part: sometimes 10-15% of the rightmost area, sometimes half, depending on the location of the map. Sometimes a bit at the bottom was also gray.

    These gray areas were again undraggable. What's even more odd is that in a case where for example the left half of the map showed correctly and the right half was gray, when I clicked the left side and dragged it further to the left, showing more of the right, at some point the right side was displayed correctly and could be dragged. However, as soon as I dragged the visible area back, the original condition was restored.

    The same repeats when I drag further to the right: there's always a gray area, but when the gray area is big enough, it's loaded and displayed normally. It seems that the map has an incorrect belief on what is the visible area that should be displayed and draggable.

    Update: The gray area issue seems to be related to having another div at the left side of the map div. If I change the map container div's display to be block instead of display-block, it starts working. Same if I leave the display as is but remove the image div to the left. Interestingly, an almost identical setup works on the individual event pages. I'll look there for a solution and will report back if I find anything conclusive.

  13. Daedalon
    Member
    Posted 11 months ago #

    Correction: The adjacent element wasn't the issue. Instead, what seemed like a fix is caused by the fact that whenever I open or close the Firefox Inspector, the maps that are visible at that moment are re-centered and start to behave as they should with no gray areas. Maps inside divs that have display: none; are not affected. The re-centered maps are still centered in an unwanted way as in the beginning of this thread.

    After setting the container divs to be visible on load, the gray area issue disappeared. In other words, we're dealing with two issues here:

    1. Centering small maps, the original issue: solved by both Bettercallsaul's panTo and Angelo_nwl's setCenter. Both solution provide an identical result. It seems that further tweaks are possible with panBy. Thanks a lot for your efforts!

    2. Displaying maps that are hidden by default. Already reported here: http://wordpress.org/support/topic/map-doesnt-position-properly

  14. philipjohn
    Member
    Posted 11 months ago #

    As with that thread, it sounds like you're going to need some Javascript that can pick up on the triggers to display the map, as with Marcus' suggestion.

    Cheers,
    Phil

  15. Daedalon
    Member
    Posted 11 months ago #

    Both issues are now resolved for us.

  16. Daedalon
    Member
    Posted 11 months ago #

    In our test site with EM 5.4.4.3 both solutions to the centering issue with small maps have stopped working. With either solution or without, the maps scroll now as they should but the centering is off. The marker is left just outside the bottom of the map area, near its horizontal center.

    In 5.4.4 the user experience for 120px high maps was worse, as described in this thread. I think the solutions worked in 5.4.4.2, but not anymore in 5.4.4.3. What in 5.4.4.3 could have caused this? Or do the solutions still work for others in 5.4.4.3?

  17. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 11 months ago #

    it might be that it's hooking in late now (we changed our ordering of loading to accommodate AJAX calls), but I'd think @bettercallsaul solution would work, and then of course use setCenter instead if you want a specific offset.

  18. Daedalon
    Member
    Posted 11 months ago #

    This is the code that worked with both setCenter and panTo on 5.4.4:

    jQuery(document).ready(function($){
        jQuery(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
            if( $('#em-wrapper').length > 0 ){ // Event List
                window.setTimeout(function() {
    //                map.panTo(marker.getPosition());
                    map.setCenter(marker.getPosition());
                }, 3000);
            }
        });
    });

    On 5.4.4.3 neither way works. Removing the delay didn't have any effect. An alert() placed after the map.setCenter line gets triggered, so the change seems to be that neither map. operation has any effect at this point.

  19. Daedalon
    Member
    Posted 11 months ago #

    Same situation with 5.5 as with 5.4.4.3.

  20. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 11 months ago #

    you shouldn't be using setTimeout nor the if statement, there's no need for it i think

    however, i think the problem is because we use panTo, so there's an offset. e.g. this works:

    /**
     * Tests the map hook
     */
    function my_em_maps_hook_test(){
    	?>
    	<script type="text/javascript">
    		jQuery(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
    			marker.setPosition(new google.maps.LatLng(0,0));
    			map.setCenter(marker.getPosition());
    		});
    	</script>
    	<?php
    }
    add_action('wp_head','my_em_maps_hook_test',1000);
  21. Daedalon
    Member
    Posted 11 months ago #

    Thanks, looking forward to testing that!

    Update: Didn't work. Had no effect on the centering, but caused the map images not to load. The whole map area is gray when using that. Same effect whether using the JS inside a .js file or with that PHP-JS solution.

    The if is on purpose to readjust the centering of maps only on the events list, not on other pages. Maps on our other pages ain't broke, so we're avoiding fixing them.

    Update 2: Tested that in the original code marker.getPosition() returns (0, 0). Is the marker not passed for em_maps_location_hook anymore since 5.4.4.3?

    Update 3: Setting the delay to 4000, 4 seconds, solved the issue. Otherwise the code that worked in 5.4.4 still works.

  22. angelo
    NetWebLogic Support
    Posted 11 months ago #

    hi, maybe @Marcus can give better advice about this; he will be around later today.

  23. Daedalon
    Member
    Posted 11 months ago #

    I found a solution mentioned in update 4. Ideally there'd be a way to do this without delays, but this works well enough for us. We load dozens of small maps on the event list page, but they're hidden until the user clicks to display extra information per event, which rarely happens in less than 4 seconds.

    Thanks for the support!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.