Google Street Map can’t work in WordPress 3.2 Solved!


I tried to embed Google Map into WordPress 3.2 and see it’s works without any failure. But, not with Google Street Map. When i trying embed this javascript code, it’s only show boxes and not images.

I thought it was my NGINX configuration or w3-total cache plugin conflict with Google Street Map. So, i try installed brand new WordPress and use this code Google Street Code :

1
2
<div id="pano" style="width: 400px; height: 300px"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script><script type="text/javascript">function init() {var fenway = new google.maps.LatLng(42.345573,-71.098326);var panoOptions = {position: fenway,addressControlOptions: {position: google.maps.ControlPosition.BOTTOM},linksControl: false, panControl: false,zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},enableCloseButton: false};var panorama = new google.maps.StreetViewPanorama(    document.getElementById("pano"), panoOptions);}window.onload = init;</script>

Guess what? It’s still not works! When i use plain test.php inside wordpress, this code work succesfully. So, this is not about .htaccess, nginx configuration or something outside WordPress.

Right now i’m still searching way to make it fixed. I will updated this post soon after success embed Google Street Map into WordPress 3.2.1

Updated
I found the problem! It’s because Twenty Eleven Themes issue. Change your themes into Twenty Ten and you got Google Street View works!

Also, i posted this problem in http://wordpress.org/support/topic/google-street-view-not-work-in-twenty-eleven-themes?replies=1#post-2245186

Updated
I found solution, this Google Street View not loaded images because max-width CSS in style.css.

1
2
3
4
5
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}

You can choose 2 solution here :

1. Delete .entry-content img and you got Google Street View works. ( Not recommended )

2. Use “max-width: none” in Google maps image container.
http://wordpress.org/support/topic/twenty-eleven-12-breaks-embedded-google-maps?replies=3. Kudos to http://wordpress.org/support/profile/iorinne


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.