refresh map ?
Beach Bum
read from mysql database by filtering the datetime field. my site is
located here:
www.myrecmaps.com (username: test password: testing)
the site opens with a default value of '7' for the dropdown box and
the sql filters out any points more than 7 days old. this works
perfectly on open. however, i have not been able to figure out how to
refresh the map when a new selection is chosen in the drop down box.
to read the markers from the database, an external file is called that
performs the following query:
$qry = "SELECT * FROM fishmarkers WHERE DATEDIFF(NOW(), datetime) <
$duration ORDER BY datetime";
where $duration is passed via the $_GET method from the calling page.
is there a way to refresh the map when a new $duration selection is
made that will preserve the mapcenter and zoom level? I am currently
using sessions so maybe it would make sense to store
$_SESSION('mapcenter') and $_SESSION('zoom')...? I am hoping somebody
has run into this need and can share code, as I am pretty new to
javascript.
thank you.
Beach Bum
Fishing Map' to go to the mapping page.
Davide Cremonesi
sorry, i should have mentioned after logging in, click on the link 'My
Fishing Map' to go to the mapping page.
--
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 google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
Aaron Sutton
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
}
?>
Rossko
>
> }
>
> function updateMarkers() {
> ?>
If you use 'view source' in your browser, is there a function
updateMarkers() actually getting to the browser ?
Davide Cremonesi
The fragment:
_________________________________________
<?php
}
function updateMarkers() {
?>
<script language="Javascript" type="text/javascript">
if(infowindow) {
infowindow.close();
}
MUST BE
_________________________________________
<?php
}
?>
<script language="Javascript" type="text/javascript">
if(infowindow) {
infowindow.close();
}
_________________________________________
and remember to close } before function bindInfoWindow.
Going back to your question about AJAX, you are already using AJAX paradigm, this is what the ActiveXObject('Microsoft.XMLHTTP') does: the URL you load do not load a new HTML page in your browser but calls a javascrpt handler which updates the content of current page with the new data.
Finally, the markers you should keep track of in order to clean them up are not the XML elements you receive in the response (var markers = xml.documentElement.getElementsByTagName("marker");) but the new google.maps.Marker you create and bind to map. You need a new global container for them.
Hope it helps,
Davide Cremonesi
Aaron Sutton
I am looking beyond my skills with Javascript. I learn well by example
and was wondering if you knew of some source code I can look at, or
possibly some online or print tutorials for javascript/AJAX/google
maps API ? I have had a hard time finding good materials on these new
technologies.
Thank you!
Aaron Sutton
functionality is included in API v3? And if so, can I use this to
filter by date? It seems this technique might also be good to only
load the points within the map boundaries.