Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question

2 Answers 2

up vote 2 down vote accepted

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.

share|improve this answer

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.

share|improve this answer
    
Well, that not quite true. Please, take a look at the page where my script doesn't work (inside of the WordPress page): uni-ex.biz/w/tourist-map and the page where it works: uni-ex.biz/w/maptest.html –  Alexey Shatygin Sep 11 '11 at 10:24
1  
@Alexey Shatygin this seems to be something, specific to Twenty Eleven (I had tried in my test theme previously and it worked there). Not sure what exactly might cause this. –  Rarst Sep 11 '11 at 10:53
    
And that's correct, thank you very mush. Works fine with twenty ten. Please, make an answer of this comment, so I could accept it. Thank you. –  Alexey Shatygin Sep 11 '11 at 11:01
1  
@Alexey Shatygin done. But it's not exactly solution, so you might want to wait for someone (more proficient with JavaScript than me) to actually solve it. –  Rarst Sep 11 '11 at 11:19
    
oh yes, sometimes I'm all on edge. –  Alexey Shatygin Sep 11 '11 at 11:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.