WordPress & Google Map Shows Blank

I recently copied some code from an existing site and pasted it into a WordPress site and ended up with a simple problem. Everything works but the WordPress template style was stuffing up the display of the map. The div was there, it was just blank.

Feel free to use my code below but you will need to use your own Latitude, Longitude, image, and you also need your own Google Maps API Key.

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=putyourkeyhere"></script>
<div id="map" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">// <![CDATA[
    function load() {
        if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById('map'));
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(-33.885892, 151.211724), 12);
        }
        var point = new GLatLng(-33.885892, 151.211724);
        var icon = new GIcon();
        icon.image = 'pointer.png';
        icon.iconSize = new GSize(55, 24);
        icon.iconAnchor = new GPoint(0, 24);
        icon.infoWindowAnchor = new GPoint(0, 0);
        var markerOptions = { icon: icon, draggable: false };
        var marker = new GMarker(point, markerOptions);
        var html = '<b>Hello World!<b>';
        GEvent.addListener(marker, 'click', function () {
            marker.openInfoWindowHtml(html);
        });
        map.addOverlay(marker);
    }
    load();
//!
// ]]&gt;</script>

If you get the map frame showing empty, you need to modify your css file in WordPress. Its location for me was root//wp-content/themes/twentyeleven/style.css

Open the file and remove the following style on line 838:

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

That should do it!

WordPress Home Page with One Post

Some of my posts are quite long so I decided I wanted to change my home page to display only one post rather than many. This made my home page look a bit neater and not so long.

In order to do this I simply logged in to my WordPress control centre and from the left hand side selected Appearance >> Editior.

From here view the left side and choose the index.php file.

At the very top of that file change the code from:
<?php get_header(); ?>

to:
<?php get_header(); query_posts($query_string.’&posts_per_page=1′); ?>

VOILA! One post per page.

Good Luck.