How to update google map pins without refreshing the whole map? - php

Question

I have been trying to make a Google map which would show multiple markers on different locations. This map is connected to a database where it stores the latitude and longitude. I want to make this map so that I can change the latitude and longitude in the database so that the markers can update and relocate to the new location. But I do not want the whole map to reload, just the data. Here is the code, and thank you for your help!
<script type="text/javascript">
//<![CDATA[
var iconBlue = new GIcon();
iconBlue.image = 'mm_20_blue.png';
iconBlue.shadow = 'mm_20_shadow.png';
iconBlue.iconSize = new GSize(16, 25);
iconBlue.shadowSize = new GSize(27.5, 25);
iconBlue.iconAnchor = new GPoint(7.5, 25);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'mm_20_red.png';
iconRed.shadow = 'mm_20_shadow.png';
iconRed.iconSize = new GSize(16, 25);
iconRed.shadowSize = new GSize(27.5, 25);
iconRed.iconAnchor = new GPoint(7.5, 25);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["1"] = iconBlue;
customIcons["2"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(34.081187, -83.980721), 8);
geocoder = new GClientGeocoder();
GDownloadUrl("genxml2.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var Names = markers[i].getAttribute("Names");
var phoneNum = markers[i].getAttribute("phoneNum");
var gender = markers[i].getAttribute("gender");
var homeAd = markers[i].getAttribute("homeAd");
var lat = markers[i].getAttribute("latitudeE6")
var lng = markers[i].getAttribute("longitudeE6")
var point = new GLatLng(parseFloat(markers[i].getAttribute("latitudeE6")),
parseFloat(markers[i].getAttribute("longitudeE6")));
var marker = createMarker(point, Names, phoneNum, gender, homeAd, lat, lng);
map.addOverlay(marker);
}
}
);
}
}
function createMarker(point, Names, phoneNum, gender, homeAd, lat, lng) {
var marker = new GMarker(point, customIcons[gender]);
place = marker
var html = "<b>Name: " + Names + "</b> <br/>Phone #: " + phoneNum + "</b> <br/>Home Address: " + homeAd + "</b> <br/>Current Address: " + place.address
+ "</b> <br/>Latitude: " + lat + "</b> <br/>Longitude: " + lng;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
};
//]]>
(some part of the code was excluded, like the MD5 key)

Answer 1

first make function called load_marker
put your code which starting gdownloadurl in new function and load markers when your data change by calling this javascript function. you may need to clear all markers first.
also you may want to reload markers in map event. there are two usefull events you can use.
drag_end and zoom_changed . you can register these by gmap.registerEvent function
edit: added code sample / your code should be like this.
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(34.081187, -83.980721), 8);
geocoder = new GClientGeocoder();
}
function load_markers() {
/*clear all*/
map.clearOverlays();
GDownloadUrl("genxml2.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var Names = markers[i].getAttribute("Names");
var phoneNum = markers[i].getAttribute("phoneNum");
var gender = markers[i].getAttribute("gender");
var homeAd = markers[i].getAttribute("homeAd");
var lat = markers[i].getAttribute("latitudeE6")
var lng = markers[i].getAttribute("longitudeE6")
var point = new GLatLng(parseFloat(markers[i].getAttribute("latitudeE6")),
parseFloat(markers[i].getAttribute("longitudeE6")));
var marker = createMarker(point, Names, phoneNum, gender, homeAd, lat, lng);
map.addOverlay(marker);
}
}
);
}
}

Answer 2

You should switch to Google Maps API v3, where pointers are linked to the map and not the opposite. Plus you'll get a bunch of interesting new features for free!