Question

I’m using the following code to center the map and therefore getting the marker at the center. The problem is that the marker is at the top left corner most of the times and when I zoom in and out, the marker will be at the top left corner once again.

What’s wrong? You can see the problem/site live at erik-edgren.nu/weather.

function initialize_map() {
    var myOptions = {
        zoom: 4,
        mapTypeControl: true,
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}

function initialize() {
    $('#map_canvas').hide();

    if(geo_position_js.init()) {
        $('#current').html('Söker efter din plats. Var god vänta...');
        geo_position_js.getCurrentPosition(show_position, function() {
            $('#current').html('Kunde tyvärr inte hitta din position.');
        }, {
            enableHighAccuracy: true
        });
    } else {
        $('#current').html('Det verkar som att din webbläsare inte tillåter att webbsidan hämtar din position. Ta en titt i webbläsarens inställningar för att se om denna funktion är igång eller inte, och försök sedan igen.');
    }
}

function show_position(p) {
    $('#current').html('');
    $('#map_canvas').show();

    var pos = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
    map.setCenter(pos);
    map.setZoom(10);

    var marker = new google.maps.Marker({
        position: pos,
        map: map
    });

    $('#weather-data').load('weather-set.php?lat=' + p.coords.latitude.toFixed(6).replace(/\./, '') + '&long=' + p.coords.longitude.toFixed(6).replace(/\./, ''));
}

Thanks in advance!

Answer 1

Make sure that you explicitly set a size on the map_canvas div element, I have run into this problem on certain browsers when I accidentally left it out.

<div id="map_canvas" style="width: 100%; height: 100%"></div> 

From the API docs:

Note that the map will always take its size from that of its
containing element, so you must always set a size on that
explicitly.