I'm adding a map next to a form on my web page. The idea is that people can sign up, and when they type in their address and click search, it place-marks their house, they must do this before they submit the form (geolocation has a large role on my site).
Unfortunately, I have added the map, but within the map window the map itself appears to be offset. See the image below to illustrate what I mean:
I can only drag the map from within the "mapped" part of the box. If I select the grey area to drag the map around, it fails.
Any ideas what could cause this?
EDIT:
Here is my map-initialising Javascript, called on page load.
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(52.428385,-3.560257);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("adminMap"), myOptions);
Here is my map CSS
#adminMap{
float:left;
width:270px;
height:370px;
margin-left:20px;
}
Here is my map HTML
<div id="adminMap">
</div>
I've seen things similar to this. Without access to any code, my best bet is that the map is initialized at a time when the container div
is hidden. I've seen that cause such symptoms. Try to set up your map as you're showing it, rather than before.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With