Google Maps and Yandex Maps doesn’t work correctly

1 Views

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):

Read More
    <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

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. 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.

  2. From quick test snippet you provided does embed map seemingly correctly. There is nothing on that map, because marker points to the middle of nowhere, you can see some road if you drag around.

    Are you inserting this in body of page? In HTML mode?

    It is good practice to make use of wp_enqueue_script(), when dealing with scripts in WordPress. However your example seems to work as is, so that might not fix your issue.

    Update

    Narrowed down to be specific to Twenty Eleven theme.