Google maps api v3 refreshing away markers
- by Paul Peelen
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
