I am new to Google Maps API. I have an HTML page which call up an event handler and then using the XML return data to population the markers and label. The issue is I can't seem to be able to refresh the labels value. The label just over write itself and sooner or later IE will crash and saying "Stop running this script? A script on this page is causing your web browser to run slowly......."
<!--<script type="text/javascript" src="/js/labeledmarker.js"></script>-->
<script type="text/javascript">
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(27.896415, -81.843137),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}
function addMarkers()
{
downloadUrl("get_waittime_feed.ashx", function (data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("latitude")),
parseFloat(markers[i].getAttribute("longitude")));
var markericons = markers[i].getAttribute("markericons");
var waitER = markers[i].getAttribute("waitER");
var customIcons = { 0: { icon: new google.maps.MarkerImage('../img/greenbb.png', new google.maps.Size(30, 30)) },
1: { icon: new google.maps.MarkerImage('../img/redbb.png', new google.maps.Size(30, 30)) },
2: { icon: new google.maps.MarkerImage('../img/hospital.png', new google.maps.Size(35, 35))}
};
var icon = {}; if (markericons == '0') {
icon = customIcons[0];
}
else if (markericons == '1') {
icon = customIcons[1];
}
else if (markericons == '2') {
icon = customIcons[2];
};
var marker = new MarkerWithLabel({
position: latlng,
map: map,
icon: icon.icon,
labelContent: waitER,
labelAnchor: new google.maps.Point(3, 30),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
}
});
};
setInterval(addMarkers, 5000);
I am new to Google Maps API. I have an HTML page which call up an event handler and then using the XML return data to population the markers and label. The issue is I can't seem to be able to refresh the labels value. The label just over write itself and sooner or later IE will crash and saying "Stop running this script? A script on this page is causing your web browser to run slowly......."
<!--<script type="text/javascript" src="/js/labeledmarker.js"></script>-->
<script type="text/javascript">
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(27.896415, -81.843137),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}
function addMarkers()
{
downloadUrl("get_waittime_feed.ashx", function (data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("latitude")),
parseFloat(markers[i].getAttribute("longitude")));
var markericons = markers[i].getAttribute("markericons");
var waitER = markers[i].getAttribute("waitER");
var customIcons = { 0: { icon: new google.maps.MarkerImage('../img/greenbb.png', new google.maps.Size(30, 30)) },
1: { icon: new google.maps.MarkerImage('../img/redbb.png', new google.maps.Size(30, 30)) },
2: { icon: new google.maps.MarkerImage('../img/hospital.png', new google.maps.Size(35, 35))}
};
var icon = {}; if (markericons == '0') {
icon = customIcons[0];
}
else if (markericons == '1') {
icon = customIcons[1];
}
else if (markericons == '2') {
icon = customIcons[2];
};
var marker = new MarkerWithLabel({
position: latlng,
map: map,
icon: icon.icon,
labelContent: waitER,
labelAnchor: new google.maps.Point(3, 30),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
}
});
};
setInterval(addMarkers, 5000);
3 Answers
Reset to default 4markers[i].label.setStyles(); // Force label to redraw (makes update visible)
Don't for me work but
markers[i].label.draw(); // redraw the label for me
This worked for me
marker.labelContent = 'New Label';
marker.label.setContent();
The reason IE is putting up that warning is that you're not actually updating the markers - you're creating a new set of markers each time you call addMarkers(). So effectively the map takes longer and longer to refresh until it exceeds IE's time-limit for JavaScript.
Instead of creating a new one each time with var marker = new MarkerWithLabel(), create them the first time your function is called, then update them on every call after that. For example:
totalmarkers = markers.length;
for (i = 0; i < totalmarkers; i++) {
if (markers[i] == null) { // Create your marker here
markers[i] = new MarkerWithLabel({
position: latlng,
map: map,
icon: icon.icon,
labelContent: waitER,
labelAnchor: new google.maps.Point(3, 30),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
} else { // Update your marker here
markers[i].labelContent = 'label content';
markers[i].labelClass = 'label class';
markers[i].label.setStyles(); // Force label to redraw (makes update visible)
markers[i].setPosition(googlemapslatlng); // Move the marker to a new position
markers[i].icon = iconurl; // If you want to change the icon
markers[i].setShape(); // Force the marker icon to redraw
}
Hope that helps. Also have a look at this thread for updating the marker labels.