Google Maps and Yandex Maps doesn’t work correctly

by

When I try to insert a map into my WordPress page, I get only a gray-colored field with some controls as shown on the picture:
enter image description here

No matter, how I put in into the page: by using a special plugin or with my own java-code. I use WordPress 3.2.1 and I’ve tryed Google Maps for WordPress version 1.0.3 and Yandex Maps for WordPress version 1.3.1 plugins as well as and my own code (I’m inserting it in the body of the page in html mode):

    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=AMJ1a04BAAAAOmnzVwIABchZJOPWw6JctS7eImmgemUoTmoAAAAAAAAAAABWck3wMFJCrzXTLH0AiuIpVEzpZA=="
    type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            var mapHybrid = new YMaps.Map(document.getElementById("YMapsHybridTypeId"));
            var mlHybrid = new YMaps.YMapsML("http://maps.yandex.ru/export/usermaps/jR_c2iaexA-htEui33mTTEmko4oPpRS-/");
            mapHybrid.addOverlay(mlHybrid);
            mapHybrid.setCenter(new YMaps.GeoPoint(-1,-1));
        }
    </script>
    <div id="YMapsHybridTypeId" style="width:640px; height:480px; float: left; margin: 10px 0 0 0"></div>

I’ve tested the problem under different browsers: Opera 10.51, Google Chrome, IE8

2 Answers
2

These errors come from CSS rules from your WordPress theme that are also applied to elements on the map. For example, on your page, I was able to fix the popup by disabling the #content table and #content tr th rules which add extra margins. In a test setup I even got gray gaps between the tiles because of .entry-content img { max-width: 97.5% } in Twenty Eleven.

Map with gaps between the tiles

Probably the easiest fix would be to embed the map in an iframe so that the main CSS rules are not applied there (I don’t know whether you can do that with the API?). If that is not acceptable for your situation, you could append extra rules that undo the WordPress rules for maps (e.g. .entry-content .map-canvas img {max-width: none}), or ask the map providers to add more explicit rules (with !important) to the style sheets they provide.

Leave a Comment