So I'm trying to combine two Google Maps API tutorials into one map. This documentation and this one.
I use to have two maps for each displayed on the sample page and now I want to have one. Everything works except for when I try to save the content to the database. document.getElementbyId doesn't return anything from the form in the info window just the coordinates.
It works when the maps are separate but not when they are together.
This is the code that I combined:
var customIcons = {
blue: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
red: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
var locationInfowindow;
var locationMarker;
function initialize() {
//get the html from the water
var waterHTML = "Why is water important in your community?" +
"<table>" +
"<tr><td>Name:</td> <td><input type='text' id='watername'/> </td> </tr>" +
"<tr><td>School:</td> <td><input type='text' id='wateraddress'/></td> </tr>" +
"<tr><td>Reason:</td> <td><input type='text' id='waterreason'/> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
//setup Map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(37.926868, -104.501953),
zoom: 5,
mapTypeId: 'roadmap'
});
//start the markers from the database
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadXMLUrl('mapxml.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("school");
var math = markers[i].getAttribute("reason");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/> <i>" + address + "</i><br/>" +math ;
var icon = customIcons['blue'] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
//Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
locationInfowindow = new google.maps.InfoWindow({
content: waterHTML
});
locationMarker = new google.maps.Marker({
draggable: true,
position: pos,
map: map,
title: 'Water Event'
});
locationInfowindow.open(map,locationMarker);
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadXMLUrl(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 handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Your browser doesn\'t support geolocation.' + '</br>'+
"Why is water important in your community?” " +
"<table>" +
"<tr><td>Name:</td> <td><input type='text' id='watername'/> </td> </tr>" +
"<tr><td>School:</td> <td><input type='text' id='wateraddress'/></td> </tr>" +
"<tr><td>Reason:</td> <td><input type='text' id='waterreason'/> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
} else {
var content = 'Error: Your browser doesn\'t support geolocation.' + '</br>' + html;
}
var options = {
map: map,
position: new google.maps.LatLng(37.926868, -104.501953),
content: content
};
locationInfowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
function saveData() {
var watername = escape(document.getElementById("watername").value);
console.log(watername);
var wateraddress = escape(document.getElementById("wateraddress").value);
console.log(wateraddress);
var waterreason = document.getElementById("waterreason").value;
console.log(waterreason);
var latlng = locationMarker.getPosition();
var url = "phpsqlinfo_addrow.php?name=" + watername + "&school=" + wateraddress + "&reason=" + waterreason + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
console.log(url);
downloadUrl(url, function(data, responseCode) {
console.log("inurl");
// if (responseCode == 200 && data.length <= 1) {
locationInfowindow.close();
document.getElementById("message").innerHTML = "Location added. Refresh to see your addition!";
// }
});
}
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 doNothing() {}