Multiple Google Maps on Same Page from Mysql? - mysql

Question

I have a page that a user inputs markers on a google map and it saves the center of map latitude and longitude, zoom and the latitude and longitude of the marker into MySQL. Next I'm trying to have a page that displays all the different maps a user has saved with the markers. I have searched and all I can find is how to display multiple markers on the same map or a set number of maps on the same page with a set lat and long.
Could anybody suggest where to start with this or a tutorial on this.
Here is the code I've started with that displays one google map with all the markers that have been entered. Not familiar with javascript, so need pointed in the right direction.
Thanks
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
var latitude= <?php echo json_encode($maplat);?>;
var longitude= <?php echo json_encode($maplon); ?>;
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(latitude, longitude),
zoom: <?php echo $mapzoom;?>,
mapTypeId: 'satellite'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var date = markers[i].getAttribute("date");
var log = markers[i].getAttribute("log");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("latit")),
parseFloat(markers[i].getAttribute("longit")));
var html = "<b>" + date + "</b> <br/>" + log;
var marker = new google.maps.Marker({
map: map,
position: point,
});
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, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>