My problem is my map marker didn't update dynamically via ajax, by right once my xml file being updated the map marker will change accordingly to the xml but it wasn't working, i have to re run the whole website in order to get the changes from the xml (refresh doesn't work as well).
Here is my code
function createTooltip(marker, key) {
//create a tooltip
var tooltipOptions = {
marker: marker,
content: places[key].tooltip_html,
cssClass: 'tooltip' // name of a css class to apply to tooltip
};
var tooltip = new Tooltip(tooltipOptions);
}
function refresh() {
setInterval(function () {
loadMarker();
}, 5000);
};
function initialize() {
var initialLocation;
var northpole = new google.maps.LatLng(90, 105);
var KL = new google.maps.LatLng(3.1597, 101.7000);
var browserSupportFlag = new Boolean();
var map;
var marker;
var mapOptions;
var mapDiv = document.getElementById("map_canvas");
if (places.length) {
mapOptions = {
center: new google.maps.LatLng(3.1597, 101.7000),
maxZoom: 21,
zoom: 17,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT
}
};
map = new google.maps.Map(mapDiv, mapOptions);
var markers = [];
for (var key in places) {
(function (myPlace) {
if (myPlace) {
var icon = {
url: myPlace.icon_html,
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(8, 41)
};
var shadow = {
url: "image/shadow.png",
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(8, 41)
};
var marker = new google.maps.Marker({
map: map,
shadow: shadow,
url: myPlace.URL_html,
icon: icon,
position: new google.maps.LatLng(myPlace.position.lat, myPlace.position.lng)
});
markers.push(marker);
createTooltip(marker, key);
google.maps.event.addListener(marker, 'click', function () {
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function () {
marker.setAnimation(null);
}, 2000);
openNewBackgroundTab(marker.url);
});
function openNewBackgroundTab(url) {
var a = document.createElement("a");
a.href = url;
var evt = document.createEvent("MouseEvents");
//the tenth parameter of initMouseEvent sets ctrl key
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
true, false, false, false, 0, null);
a.dispatchEvent(evt);
}
}
})(places[key]);
}
}
var markerCluster = new MarkerClusterer(map, markers);
// Try W3C Geolocation (Preferred)
if (navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({
position: initialLocation,
icon: 'image/footprint.png',
title: 'You are here !'
});
$('#findout').on('shown', function (e) {
google.maps.event.trigger(map, 'resize');
marker.setMap(map);
map.setCenter(initialLocation);
});
}, function () {
handleNoGeolocation(browserSupportFlag);
});
}
// Browser doesn't support Geolocation
else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag === true) {
alert("Geolocation service failed.");
initialLocation = KL;
} else {
alert("Stop using IE");
initialLocation = northpole;
}
map.setCenter(initialLocation);
}
}
google.maps.event.addDomListener(window, "load", initialize);
var places = Array();
function loadMarker() {
$.ajax({
url: "js/datatesting.xml",
dataType: 'xml',
success: onLoadMarker
});
};
function onLoadMarker(data) {
$(data).find("merchantMarker").each(function () {
places.push({
URL_html: "" + $(this).find('merchantProfileUrl').text() + "", //mapshop profile url
tooltip_html: "<div id='tooltips'>\n\
<div class='cover' style='background-image:url(image/default.jpg);'>\n\
<table style='margin-left:20px;'>\n\
<tr>\n\
<td><img class='photo img-circle' src='" + $(this).find('merchantProfilPicture').text() + "'>\n\
</td>\n\
</tr>\n\
<tr>\n\
<th class='text-center'>\n\
" + $(this).find('merchantName').text() + "\n\
</th>\n\
</tr>\n\
</table>\n\
</div>\n\
<div class='status'>\n\
<p>" + $(this).find('merchantAboutUs').text() + "</p>\n\
</div>\n\
</div>",
icon_html: '' + $(this).find('merchantMapMarker').text() + '', //mapshop marker
position: {
lat: $(this).find('merchantLat').text(),
lng: $(this).find('merchantLon').text()
} // shop lat and lon
});
});
};
$(document).ready(function () {
$('#findout').click(function () {
$('#suggestion').hide();
$('#function_stream').hide();
$('#function_me').hide();
$('#function_findout').show();
});
loadMarker();
refresh();
});
I'm not sure what's wrong with it, please enlighten me your help is appreciated.
UPDATED
var page = new Date().getTime();
$.ajax({
url:"js/datatesting.xml",
dataType: 'xml',
data: {page: page},
success: onLoadMarker
});
and another problem occurs , may i know how to delete the existing marker ? and replace it with the new one ? because now the new marker is stack on the old one if i'm not mistaken , usually, i will use $(#something).children().remove; before append some data into it , but for map i have no idea ..
