Possible Duplicate:
Google Maps v3 Shifting After Loading in WordPress
I used the code generated with this useful tool: http://powerhut.co.uk/googlemaps/custom_markers.php
This is my html before < / head > tag:
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" >
function initializeMap()
{
var point = new google.maps.LatLng(42.61196, 12.54584);
myOptions = {
zoom: 13,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var image = new google.maps.MarkerImage(
'/wp-content/plugins/comprehensive-google-map-plugin/assets/css/images/markers/medicine.png',
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);
var shape = {
coord: [29,0,30,1,31,2,31,3,31,4,31,5,31,6,31,7,31,8,31,9,31,10,31,11,31,12,31,13,31,14,31,15,31,16,31,17,31,18,31,19,31,20,31,21,31,22,31,23,31,24,31,25,31,26,31,27,31,28,31,29,30,30,29,31,23,32,22,33,21,34,20,35,19,36,12,36,11,35,10,34,9,33,8,32,2,31,1,30,0,29,0,28,0,27,0,26,0,25,0,24,0,23,0,22,0,21,0,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,0,3,0,2,1,1,2,0,29,0],
type: 'poly'
};
var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
var marker = new google.maps.Marker({
map: map,
title: "Marker Title",
position: point,
icon: image,
shape: shape
});
var window = new google.maps.InfoWindow({
content: "<b>Marker Title</b>",
maxWidth: 150
});
var infoWindow = new google.maps.InfoWindow(window);
google.maps.event.addListener(marker, "click", function() {
infoWindow.open(map, marker);
});
}
</script>
On body:
<body onload="initializeMap();">
Inside body…
<div id="googleMap"> </div>
…and the style…
#googleMap {
width: 540px;
height: 400px;
margin: 20px auto;
}
I’m using WordPress and the map seems to be loaded two times, creating a smoothing effect and corrupting some commands.
Any ideas?
Your map is only loading once. The problem is WordPress styles. See Google Maps v3 Shifting After Loading in WordPress