Thank you for the suggestions Davide. I attempted to do as you stated,
but have not had much luck. I believe my markers are already being
stored in an array, indicated by the line
for (var i = 0; i < markers.length; i++) {
which is just after the parseXml function after reading the points from mysql.
I moved the downloadUrl function, as well as the functions it calls,
out of the load() function to a new function, updateMarkers() in which
I tried to first clear the current infowindows and markers. I then
left a call to this new function in the load() function.
When you say the updateMarkers function will be called in AJAX mode,
is there anything I need to do to implement AJAX or is this just a
term to describe this style of loading data?
It is not giving any errors, but also is not displaying any points so
I am not sure where I am going wrong here. do you know of any good
resources I might use as a reference?
Here is my 'map_fns_fish.php' file (can you access this file directly
online?)---------
<?php
function do_map_controls() {
?>
<body>
<div id="mapcontainer">
<div id="mapheader"><h2 align="center"><?php echo
$_SESSION['valid_user']?>'s Fishing Recreation Map</h1><hr /></div>
<div id="mapoptions">
<span class="showmarkers">Show markers since:
<select id="duration" onChange="updateMarkers()">
<option value="1">Yesterday</option>
<option value="3">Last 3 Days</option>
<option value="7">Last Week</option>
<option value="30" SELECTED >Last Month</option>
<option value="90">Last 3 Months</option>
<option value="365">Last Year</option>
<option value="10000">All</option>
</select>
</span><hr />
</div>
<div id="map" style="width: 100%; height: 80%"></div>
</div>
</body>
<?php
}
function updateMarkers() {
?>
<script language="Javascript" type="text/javascript">
if(infowindow) {
infowindow.close();
}
for(var i=0; i<this.markers.length; i++){
this.markers[i].setMap(null);
}
downloadUrl("ReadFishMarkers.php?duration=" +
parseInt(document.getElementById('duration').value), function(data) {
var xml = parseXml(data);
var markers =
xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var title = markers[i].getAttribute("title");
var species = markers[i].getAttribute("species");
var conditions = markers[i].getAttribute("conditions");
var bait = markers[i].getAttribute("bait");
var comments = markers[i].getAttribute("comments");
var datecaught = markers[i].getAttribute("datecaught");
var timecaught = markers[i].getAttribute("timecaught");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var username = markers[i].getAttribute("username");
if (username == "<?php echo $_SESSION['valid_user']?>")
{
type = "me";
}
else if ("<?php get_friends_csv();?>".search(username)
!=-1 )
{
type = "friend";
}
else
{
type = "other";
};
var html = "<b>" + title + "</b> <br/>Angler:" +
username
+ "<br/>Fish Caught: " + species +
"<br/>Conditions: " + conditions +
"<br/>Bait: " + bait
+ "<br/>Comments: " + comments +
"<br/>Date Caught: " + datecaught +
"<br/>Time Caught: "
+ timecaught;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
title: title + " - " + username
});
bindInfoWindow(marker, map, infoWindow, html);
}
})
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
};
</script>
<?php
}
function do_map() {
?>
<script
src="http://www.google.com/jsapi?key=ABQIAAAAfCRztULQzswAus_jVSWN0BTb-vLQlFZmc2N8bgWI8YDPp5FEVBSSXM49AZc9HzdYqPtiHdyOblpWmg";
type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<![CDATA[
google.setOnLoadCallback(load);
function load() {
if (google.loader.ClientLocation)
{
var map = new google.maps.Map(document.getElementById("map"), {
center: new
google.maps.LatLng(google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude),
zoom: 11,
mapTypeId: 'terrain',
mapTypeControlOptions: {style:
google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
}
else
{
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(39.85, -89.12),
zoom: 4,
mapTypeId: 'terrain',
mapTypeControlOptions: {style:
google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
};
var infoWindow = new google.maps.InfoWindow;
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
updateMarkers();
}
var customIcons = {
me: {
icon: 'images/graphics/mm_20_red.png',
shadow: 'images/graphics/mm_20_shadow.png'
},
friend: {
icon: 'images/graphics/mm_20_blue.png',
shadow: 'images/graphics/mm_20_shadow.png'
},
other: {
icon: 'images/graphics/mm_20_yellow.png',
shadow: 'images/graphics/mm_20_shadow.png'
}
};
function HomeControl(controlDiv, map) {
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'red';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlDiv.style.padding = '5px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Add a New Location to Map';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Add Point';
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click',
function(event) {
var htmlAdd = "<table>" +
"<tr><td>Title:</td> <td><input type='text'
id='title'> </td> </tr>" +
"<tr><td>Species:</td> <td><input type='text'
id='species'/></td> </tr>" +
"<tr><td>Conditions:</td> <td><input type='text'
id='conditions'/></td> </tr>" +
"<tr><td>Bait:</td> <td><input type='text'
id='bait'/></td> </tr>" +
"<tr><td>Comments:</td> <td><input type='text'
id='comments'/></td> </tr>" +
"<tr><td>Date Caught:</td> <td><input type='text'
id='datecaught'/></td> </tr>" +
"<tr><td>Time Caught:</td> <td><input type='text'
id='timecaught'/></td> </tr>" +
"<tr><td></td><td><input type='button' value='Save &
Close' onclick='saveData()'/></td></tr>";
marker = new google.maps.Marker({
position: map.center,
map: map,
draggable: true });
infowindowAdd = new google.maps.InfoWindow({
content: htmlAdd
});
infowindowAdd.open(map, marker);
});
}
function saveData() {
var title = escape(document.getElementById("title").value);
var species = escape(document.getElementById("species").value);
var conditions = escape(document.getElementById("conditions").value);
var bait = escape(document.getElementById("bait").value);
var comments = escape(document.getElementById("comments").value);
var datecaught = escape(document.getElementById("datecaught").value);
var timecaught = escape(document.getElementById("timecaught").value);
var latlng = marker.getPosition();
var url = "AddFishMarker.php?title=" + title + "&species=" + species +
"&conditions=" + conditions + "&bait=" + bait +
"&comments=" + comments + "&datecaught=" + datecaught +
"&timecaught=" + timecaught + "&lat=" + latlng.lat() +
"&lng=" + latlng.lng() +
"&username=<?php echo $_SESSION['valid_user']?>";
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindowAdd.close();
}
});
updateMarkers();
}
function doNothing() {}
//]]>
</script>
<?php
}
?>
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
