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();
//!
// ]]></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!
