Hiya,
Do you have a link to your site where we can see this in action please?
Thanks,
Phil
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/
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.
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
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?
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!
Better solution
jQuery(document).ready(function($){
$(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
map.panTo(marker.getPosition());
});
});
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());
});
});
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 🙂
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
Thanks! Tried that, and it produced some similarly odd results. Upon loading the small (approx. 250×120) 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.
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
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
Both issues are now resolved for us.
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?
