Google maps api v3 refreshing away markers

Question

Hi,

I am having problems with the google maps API V3. It seems that every time I load my page the maps load (including the markers) and then it does a quick reload and removes all the markers. Am I missing somehting? What am I doing wrong?

Here is an example: http://www.PaulPeelen.com/wp-content/uploads/2010/04/SafariScreenSnapz001.mov

this is my code:

<script type="text/javascript">
<!--
var hash = "{{$sHashLocal}}";
var webroot = "{{$webroot}}";
var map;

function initialize() {
    var latlng = new google.maps.LatLng(59.32045, 18.066902);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    return map;
}

function getMarkerInfo (infowindow, rack_id)
{
    // Get all the racks
    $.ajax({
        type: "GET",
        url: webroot+"ajax/getRack/"+hash+"/"+rack_id,
        cache: false,
        dataType: "html",
        success: function(html) {
            $("#rack_"+rack_id).html();

            infowindow.setContent(html);
        }
    });
}

$(document).ready(function () {
map = initialize();



function attachSecretMessage(marker, rack_id) {
    var infowindow = new google.maps.InfoWindow({
        size: new google.maps.Size(50,50)
    });

    google.maps.event.addListener(marker, 'click', function(){
        var ret = '<div id="rack_'+rack_id+'" class="rackDiv"><div class="rackDivLoading"><img src="theme/images/loader-small.gif" border="0"/><span>Hämtar data</span></div></div>';
        infowindow.setContent(ret);
        infowindow.open(map,marker);

        getMarkerInfo(infowindow,rack_id);
    });
}

function addPlacemark (lat,lng,title, rack_id) {
    var image = new google.maps.MarkerImage('http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
              new google.maps.Size(32, 32),
              new google.maps.Point(0,0),
              new google.maps.Point(0, 32));
    var shadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/shadow50.png',
              new google.maps.Size(37, 34),
              new google.maps.Point(0,0),
              new google.maps.Point(-4, 34));

    var location    = new google.maps.LatLng(lat,lng);
    var marker      = new google.maps.Marker({
                        position: location, 
                        map: map,
                        icon: image,
                        shadow: shadow});


    marker.setTitle(title);

    attachSecretMessage(marker, rack_id);
}

// Get all the racks
$.ajax({
    type: "GET",
    url: webroot+"ajax/getRacks/"+hash,
    cache: false,
    dataType: "xml",
    success: function(xml) {
        // Add the results
        $(xml).find("station").each(function () {
            rack_id = $(this).find("rack_id").text();
            title = $(this).find("description").text();
            longitute = parseFloat($(this).find("longitute").text());
            latitude = parseFloat($(this).find("latitude").text());

            addPlacemark(latitude, longitute, title, rack_id);
        });
    }
});

$("#addMark").click(function () {

    addPlacemark (59.32045, 18.066902);
});

// Set size
setPageSize();
});
//-->
</script>

I hope somebody can help me.

Best regards, Paul Peelen

Answer 1

You last post got me thinking, so I overlooked my code and saw an old debug code that re-run the initialize() function. Thanks for your help!