Markers on maps don't display well in iPhone

G’day Miquel,

It’s definitely some CSS on your website messing that up. I dropped that map into a local testbed with twentytwelve theme, and it worked just fine on an iPhone.

I tried installing JetPack on my local testbed to try and diagnose the problem, but of course it’s engineered for total domination and won’t play ball without a live connection to WordPress.com so I couldn’t get it working. (Nor on one of my hosted test sites, the host rejects connections from WordPress.com)

Perhaps you can take the problem up with the JetPack authors.

cheers,
Ross

Hi Ross,

I could reproduce the behaviour on my Chrome web browser in a iPhone4 simulator: I go to Chrome, select menu “More tools” (or similar, in my language it says “Més eines”), Development Tools, click on a Smartphone icon on the header of the CSS inspector below, then a SmartPhone simulator appears on screen with a CSS inspector below it, then I check my web page as before, and the map does exactly the same wrong thing.

My problem is I know little CSS so I can’t identify the offending class.

I know I can override any wrong class with a proper one by using “Edit CSS” WordPress.com tool inside my own Jetpack, so once identified the problem it should not be too difficult to correct.

Obviously this is a bug in my Theme (a customized Twenty Ten 1.6) but any help on identifying the wrong CSS (the one that displays the marks on the map) would be welcome.

Hope you can help me. Cheers !

Hello again Ross.

I have observed further details regarding this problem. When displaying the Flexible Map in a cell phone (I tried in iPhone 4 and Samsung S3), the markers on screen display incorrectly, but if you keep scrolling the map to the left (you know Google Maps shows a continuous map) then the markers appear again IN THE CORRECT LOCATIONS. Is there a way to display the Flexible Map centered on the correct location (that is, an “earth turn” to the left)?

By the way, the mobile theme used in my website is the one by Jetpack, do you think I would get better results by disabling Jetpack mobile theme and seek for another mobile theme? Despite I’m happy of Jetpack functionalities, many people say it “hijacks” the website behaviour… could this be the culprit for the CSS mess?

Any help and or ideas are welcome. Thank you. Cheers !

G’day Miquel,

Interesting. Yes, it’ll be Jetpack’s mobile theme doing this somehow.

If you’re lucky, just telling the map to redraw will fix it. You could try doing that the easy way, by setting the zoom level — zoom="11" or something. That waits for the KML file to load and begin rendering, then changes the zoom which triggers a redraw.

If that’s not suitable, perhaps just try triggering a redraw. Add this code to your theme’s footer.php:

<script>
if (window.addEventListener && document.querySelectorAll) {
    window.addEventListener("DOMContentLoaded", function() {
        var flxmaps = document.querySelectorAll("div.flxmap-container"),
            i, len, flxmap;

        for (i = 0, len = flxmaps.length; i < len; i++) {
            flxmap = window[flxmaps[i].getAttribute("data-flxmap")];
            google.maps.event.addListenerOnce(flxmap.getMap(), "zoom_changed", function() {
                flxmap.redrawOnce();
            });
        }
    });
}
</script>

Unfortunately, I can’t test this with Jetpack myself. That behemoth that calls itself a plugin won’t run in my development environment because it’s behind a firewall, and won’t run on my burner test environment because of some security rules. Sometime when I get some free time (ha!) I’ll get a new burner environment set up where I can test Jetpack, but that won’t be before we usher in 2015…

cheers,
Ross

Hi Ross,

I already had the zoom parameter set (to value 2 instead of 11) so I changed the zoom value yet the problem persisted. Then I disabled the Jetpack Mobile Theme and installed another mobile theme plugin, and EVERYTHING WORKS FINE now… regarding the maps. In exchange, I lost the website search function from the new mobile theme. But this is another battle, not for you.

Thank you very much Ross. Cheers !

No worries, glad you have it working now.

cheers
Ross