I just bought and installed Widgetkit in a WordPress site that I'm building, and I was running into this same issue. I chased it down to a CSS issue that was a pretty simple fix:

.wk-map img {max-width:none;}

Seems like it would be pretty simple for YOOtheme to add this to widgetkit.css

Hi Peter,

I am one of the volunteer WordPress Support Moderators and just saw your question.

I too was not able to identify the issue after reviewing your website. I will say I've not seen WidgetKit utilized on a theme other than one provided by YOOtheme. However, I doubt that is the case. I'll send this question to the YOOtheme development team and see if they can provide some guidance.

Best Regards,

David Carroll

Yootheme, is this being addressed in future releases?

I just bought and installed Widgetkit in a WordPress site that I'm building, and I was running into this same issue. I chased it down to a CSS issue that was a pretty simple fix:

.wk-map img {max-width:none;}

Seems like it would be pretty simple for YOOtheme to add this to widgetkit.css

Thank you! I look forward to hearing what the development team will say.

Best regards,
Peter

Sorry I haven't brought this up with the YOOtheme Team yet. I had some things come up. In the meantime, I did notice a bit more about your issue.

The issue appears to be the inline styles applied to the Google Map page. The positioning of everything is off by no discernible pattern. I then thought this could be due to Google Maps API scripts loading before the rest of the page DOM has loaded with final element positions defined.

If you look more closely at your HTML Source, the Google Maps API Script is loaded in the header of your website using the following path:

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript">  

Compare this to the HTML Source of the WidgetKit Maps Demo Page and you'll see that the script reference isn't even there. However, when you view this in FireBug, the following scripts are loaded just before the closing </body> tag and is loaded asynchronously:
NOTE: This script is dynamically added to the DOM after the page has fully loaded.

<script type="text/javascript" async="" src="http://maps.google.com/maps/api/js?sensor=false&callback=jQuery.fn.googlemaps.ready">  
<script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/7/5/main.js">  

Going back to your website, I noticed these scripts are loaded in the header only when viewed within Firebug. However, the HTML Source from the browser does not include the main.js file listed after the Maps API file. Rather, the HTML Source has a custom JavaScript function called initialize() listed after the Google Maps API. NOTE, this function is never called.

That said, after comparing the googlemaps object loaded in the DOM, there are obvious differences indicating your version of the googlemaps object is not loading properly.

Based on these observation, my guess is the Google Maps API reference should not be included in the header. It may possibly cause a duplicate loading of this file or simply prompts it to load in the header when it would have loaded just before the closing </body> tag.

Perhaps you can confirm if you manually loaded this script. If so, try removing it and let the WidgetKit load it for you.

If that doesn't work, try manually adding the script reference just above the closing </body> tag.

Sorry if this review is too mundane and detailed. I just had to do a brain dump in case it's helpful for the YOOtheme team to review.

Cheers,

David Carroll

Hi Peter, the new WidgetKit v1.0 Beta 20 was just released today. Although I think the issue you are experiencing is related to additional scripts attempting to load the Google Map API script, I thought I'd let you know about the update. Let me know if you see any difference.

Thanks,

David Carroll

Hi David!

Thank you very much for your answers.

I have found the code in the template and deleted it. However, the problem is not solved. I have checked the HTML Source and also using Firebug and the only time I can see the Google Maps script in the header is when Widgetkit is loaded. You can compare going to any item in the menu and then looking at the frontpage, where there is no maps. Which makes me think that Widgetkit is the only source of the script being loaded now.

The update didn't fix the problem, and actually when using the latest GChrome Beta it looks even worse (this website too has problems with GChrome Beta btw).

Can you please take another look and see if I am right? I might be missing something here.

Thanks.

Kind regards,
Peter.

Thanks for the update. I'll share this with the dev team and post an update.

Hi Peter,

Thanks for making the correction as you did. The scripts are initializing from the proper locations, as far as I can determine.

I was taking another look at the loaded googlemaps object. After spending some time on this, I could not recreate your map issue. I am suspecting the issue may be related to markup added in either the Popup Text box or the Location Title.

Test 1: Create a Test Map

If you don't mind, please test this by creating a new map, then add only 2 Locations. Use locations that don't require unicode characters in the name. Characters like "ø" in "Tromsø" get converted in javascript to its unicode alternative: \u00f8. I doubt this is the issue. However, I'd like to eliminate everything.

NOTE: When updating your location, never copy and paste. Please type the text directly into the input boxes. I want to rule out characters that are not compatible with HTML.

Let me know if the map still loads with distorted results. If it loads normally, try the next test.

Test 2: Copy Bad Map and Reduce to 1 Location

Step 1: Create a copy of the map you have on this page. You can do this by clicking the "Copy" button on the map list.

Step 2: Then, update your page to use the copied map. I expect nothing to change yet.

Step 3: Then, in the copy of your map, delete all but 1 location. Use a location that has no unicode characters.

Step 4: If the issue remains, clear out the Popup Text box and Title. Change the title to "Test Location 1". Change the Popup Text to "Test Popup 1". Save and refresh your page.

Step 5: If the issue remains, let me know. If it loads properly, review the markup in this location and figure out what the issue could be from.

Step 6: Once you can get this location to load properly, Create a new copy of the original (defective) map and update your post to reflect the new WidgetKit ID.

Step 7: With this new copy, if any corrections were made to the test location, apply those same corrections and refresh you page. It's possible this location caused an issue.

Test 3: Copy Bad Map and Reduce to 2 Locations

If no correction was previously necessary or if the map does not load properly after making a correction, do the following:

Step 1: Keep the original test location and remove all but 1 additional location. Save your changes and refresh your page.

Step 2: Repeat steps from previous test until map is loading.

Try to identify a common pattern if any fixes are resolving the issue for the first two test.

Alternative Test: Copy Bad Map and Reduce by 1 Location at a Time

On the otherhand... if no corrections were necessary when reducing locations to 1 and / or 2 locations, try the opposite approach as follows:

Step 1: Create a new copy of the original bad Map and update your page to use the new copy.

Step 2: Remove one location, save, and refresh your map.

Step 3: Continue this until you see an improvement with the map format.

Closing Notes:

It's possible the issue is related to the number of locations. However, I think it might be some bad character that might have been pasted in from another location when you were building the map.

I'll let you know if I get any additional insight from the dev team as well.

Thanks,

David Carroll

Hi Peter,

Sorry it's taken me a while to get back to you. One of the YOOtheme developers reviewed this question and your site and noticed something I missed. The map markers are green push pins. However, he explained this is not a map marker used by the WidgetKit.

Do you have any idea how the green push pins could have been place in this setup? One theory I have is there is another plugin or some script that has replaced the map marker. If we can identify this script, that would help explain a lot regarding the issue you are experiencing.

Thanks,

David Carroll

Hi David!!

I'm sorry for taking such a long time to answer, but I didn't have time to do it before.

I have tried creating a new map, with 2 locations, everything in English or with no Norwegian letters, and the problem persists. One thing that is working correctly now, and that it didn't before, is that in the backend I can now see the visual editor when writting, and that wasn't working before.

However, when it comes to the problem with the map, this still renders incorrectly.

The thing with the gree push pins is actually an option in wodgetkit. You can select the pushpin you want. No extra plugins whatsoever. Under marker, you can select the marker you want. Anyway, during my test I just used the one that comes by default, the red dot, and the problem persists. No title, and the pop up doesn't display as it should.

Would you like that I send you admin credentials so you can take a closer look from inside?

Thanks!

Peter.

Peter,

Thanks for clarifying this. Have you had a chance to test this map when activated in a YOOtheme template? I'd like to identify if this is due to the current theme you are using or if it is due to something else like a conflicting plugin.

Thanks,

David

Hi David,

I have the same problem, but in Joomla not Wordpress. As I am doing a localhost homepage right now I cannot give you URL. Sorry.

I have a map with about 60 locations and everything went fine. No display errors etc. Since one week the backend of widgetkit map is dead slow and is telling me that the script is not answering anymore (Firefox and/or Safari) and the frontpage graphics are scrambled like above.

I tried your suggestions, but it does not work (latest widgetkit version). I did a fresh install (different database, different joomla version, different template) and the maps work fine. So I guess it must have something to do with a certain plugin installed, but I cannot find out...

Do you have made any new experiences with that issue since January?

Thanks for helping

Peter

Hey John.Sundberg

Thank you so much, that just helped fixing my problem !

http://www.yootheme.com/support/question/3477 - Had totally this problem.

Thx !

Problem was solved for like ... 5 seconds, after I added the first 3 letters for testing it, it worked. Afterwards same problem again... Wtf .. Need backup !

john.sundberg's solution worked for me too (i simple multi-point widgetkit map that kept breaking if I used it within a content area via shortcode).