I trying to do the map base on geocodezip example http://www.geocodezip.com/geoxml3_test/v3_FusionTables_CountryBrowser.html , but I have always have message on my map "Data may still be loading".
I reduce my map to only 10 polygons but I have same message over and over.
Inside left sidebar; name of the polygons are properly displayed, and when I click "show" map guide me to the exact place of the polygon, but the polygons are not displayed on the map. Does anyone have any suggestions?
My code is below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Fusion Tables Natural Earth Data Country Browser</title>
<style type="text/css">
html, body, #map_canvas {
width: 750px;
height: 600px;
margin: 0;
padding: 0;
}
.infowindow * {font-size: 90%; margin: 0}
</style>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="geoxml3_kmlStr.js"></script>
<!-- Initialize -->
<script type="text/javascript">
// globals
var map = null;
var infoWindow = null;
var geoXml = null;
var geoXmlDoc = null;
var myLatLng = null;
var myOptions = null;
var mapCenter = null;
var geocodeTheCountry = true;
var gpolygons = [];
var geocoder = null;
// Fusion Table data ID
var FT_TableID = '1-bZhRr6OMbj4NWZcY8XnVjpijvV97yNgSXSf_mE';
var CountryName = "USA"; // "United States of America";
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
function createSidebar() {
// set the query using the parameters
document.getElementById('sidebar').innerHTML = "querying for data";
var FT_Query2 = "SELECT 'name_0', 'name', 'geometry' FROM "+FT_TableID+" WHERE 'name_0' = '"+CountryName+"' ORDER by 'name'";
document.getElementById("FTquery2").innerHTML = FT_Query2;
var queryText = encodeURIComponent(FT_Query2);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(getData);
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(createSidebar);
function getCountryNames() {
// set the query using the parameters
var FT_Query_CountryName = "SELECT 'name_0', count() FROM "+FT_TableID+" GROUP by 'name_0' ORDER by 'name_0'";
document.getElementById("FTquery4").innerHTML = FT_Query_CountryName;
var queryText = encodeURIComponent(FT_Query_CountryName);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(createCountryDropdown);
}
function createCountryDropdown(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
//for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
var countryNames = {};
for (var i = 0; i < numRows; i++) {
var countryName = response.getDataTable().getValue(i,0);
// countryName = countryName.substring(0,countryName.indexOf('('));
countryNames[countryName] = countryName;
}
var countryNameDropdown = "<select name='country_select' onchange='handleSelected(this)'>"
countryNameDropdown += '<option selected> - Select a country - <\/option>';
for (countryName in countryNames) {
countryNameDropdown += "<option value='"+countryName+"'>"+countryName+"</option>"
// document.getElementById('country_list').innerHTML += countryName+"<br>";
}
countryNameDropdown += "</select>"
document.getElementById('dropdown_menu').innerHTML = countryNameDropdown;
}
// ======= This function handles selections from the select box ====
function handleSelected(opt) {
if (opt.selectedIndex > 0) {
CountryName = geoXML3.nodeValue(opt[opt.selectedIndex]);
DisplayCountry();
} else {
alert("Please pick a country");
}
}
function DisplayCountry() {
// geocode the country
var addressStr = CountryName;
if (addressStr != "Baikonur Cosmodrome") addressStr += " Country";
geocoder.geocode( { 'address': addressStr}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
map.fitBounds(results[0].geometry.viewport);
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
FT_Query = "SELECT 'geometry' FROM "+FT_TableID+" WHERE 'name_0' = '"+CountryName+"';";
gpolygons = [];
layer.setQuery(FT_Query);
document.getElementById("FTquery").innerHTML = FT_Query;
createSidebar();
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var FTresponse = null;
myLatLng = new google.maps.LatLng(37.422104808,-122.0838851);
// these set the initial center, zoom and maptype for the map
// if it is not specified in the query string
var lat = 37.422104808;
var lng = -122.0838851;
var zoom = 18;
var maptype = google.maps.MapTypeId.ROADMAP;
// If there are any parameters at eh end of the URL, they will be in location.search
// looking something like "?marker=3"
// skip the first character, we are not interested in the "?"
var query = location.search.substring(1);
// split the rest at each "&" character to give a list of "argname=value" pairs
var pairs = query.split("&");
for (var i=0; i<pairs.length; i++) {
// break each pair at the first "=" to obtain the argname and value
var pos = pairs[i].indexOf("=");
var argname = pairs[i].substring(0,pos).toLowerCase();
var value = pairs[i].substring(pos+1);
if (argname == "country") {CountryName = unescape(value);}
value = pairs[i].substring(pos+1).toLowerCase();
// process each possible argname - use unescape() if theres any chance of spaces
if (argname == "geocode") {geocodeTheCountry = (value != "false");}
if (argname == "id") {id = unescape(value);}
if (argname == "filename") {filename = unescape(value);}
if (argname == "marker") {index = parseFloat(value);}
if (argname == "lat") {lat = parseFloat(value);}
if (argname == "lng") {lng = parseFloat(value);}
if (argname == "zoom") {
zoom = parseInt(value);
myGeoXml3Zoom = false;
}
if (argname == "type") {
// from the v3 documentation 8/24/2010
// HYBRID This map type displays a transparent layer of major streets on satellite images.
// ROADMAP This map type displays a normal street map.
// SATELLITE This map type displays satellite images.
// TERRAIN This map type displays maps with physical features such as terrain and vegetation.
if (value == "m") {maptype = google.maps.MapTypeId.ROADMAP;}
if (value == "k") {maptype = google.maps.MapTypeId.SATELLITE;}
if (value == "h") {maptype = google.maps.MapTypeId.HYBRID;}
if (value == "t") {maptype = google.maps.MapTypeId.TERRAIN;}
}
}
if (!isNaN(lat) && !isNaN(lng)) {
myLatLng = new google.maps.LatLng(lat, lng);
}
infoWindow = new google.maps.InfoWindow();
//define callback function, this is called when the results are returned
function getData(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
FTresponse = response;
//for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
if (numRows <= 1) {
document.getElementById('sidebar').innerHTML = "no data";
return;
}
//concatenate the results into a string, you can build a table here
fusiontabledata = "<table><tr>";
// for(i = 0; i < numCols; i++) {
fusiontabledata += "<th colspan='2'>" + response.getDataTable().getValue(1,0) + "</th>";
// }
fusiontabledata += "</tr><tr>";
fusiontabledata += "<tr><td colspan='2' align='left'><a href='javascript:showAll();'>show all</a></td></tr>";
for(i = 0; i < numRows; i++) {
// for(j = 0; j < numCols; j++) {
/*
var kml = response.getDataTable().getValue(i,2);
geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
*/
fusiontabledata += "<td><a href='javascript:myFTclick("+i+")'>"+response.getDataTable().getValue(i, 1) + "</a></td><td><a href='javascript:zoomTo("+i+")'>show</a></td>";
// }
fusiontabledata += "</tr><tr>";
}
fusiontabledata += "</table>"
//display the results on the page
document.getElementById('sidebar').innerHTML = fusiontabledata;
}
function infoWindowContent(name, description, id) {
content = '<div class="FT_infowindow"><h3>' + name +
'</h3><div>' + description + '</div>';
if (typeof id != "undefined") {
content += 'zoom to';
}
content += '</div>';
return content;
}
function zoomTo(id) {
loadRow(id);
if (gpolygons[id] && gpolygons[id].bounds) {
map.fitBounds(gpolygons[id].bounds);
var queryStr = "SELECT 'geometry' FROM "+FT_TableID+" WHERE 'name_0' = '"+CountryName+"' AND 'name' = '"+gpolygons[id].name+"';"
layer.setQuery(queryStr);
document.getElementById("FTquery3").innerHTML = queryStr;
}
}
function showAll() {
layer.setQuery("SELECT 'geometry' FROM "+FT_TableID+" WHERE 'name_0' = '"+CountryName+"';");
}
function loadRow(row) {
if (!gpolygons[row]) {
var name = FTresponse.getDataTable().getValue(row,1);
var kml = FTresponse.getDataTable().getValue(row,2);
// create a geoXml3 parser for the click handlers
var geoXml = new geoXML3.parser({
map: map,
zoom: false,
infoWindow: infoWindow,
singleInfoWindow: true
});
geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
geoXml.docs[0].gpolygons[0].setMap(null);
gpolygons[row] = new Object();
gpolygons[row].position = geoXml.docs[0].gpolygons[0].bounds.getCenter();
gpolygons[row].bounds = geoXml.docs[0].gpolygons[0].bounds;
gpolygons[row].name = name;
}
}
function myFTclick(row) {
var description = FTresponse.getDataTable().getValue(row,0);
var name = FTresponse.getDataTable().getValue(row,1);
loadRow(row);
var position = gpolygons[row].position;
/*
var lat = FTresponse.getDataTable().getValue(row,4);
var lng = FTresponse.getDataTable().getValue(row,5);
var position = new google.maps.LatLng(lat, lng);
*/
// Set up and create the infowindow
if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
infoWindow.setOptions({
content: infoWindowContent(name, description, row),
pixelOffset: new google.maps.Size(0, 2),
position: position
});
// Infowindow-opening event handler
infoWindow.open(map);
}
function initialize() {
myOptions = {
zoom: zoom,
center: myLatLng,
// zoom: 5,
// center: myLatlng,
mapTypeId: maptype
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, "click", function(event) {
infoWindow.close();
var FT_click_query="SELECT 'name_0' FROM "+FT_TableID+" WHERE ST_INTERSECTS('geometry',CIRCLE(LATLNG"+event.latLng+", 1));";
// alert(event.latLng+"query="+FT_click_query);
// set the query using the parameters
var queryText = encodeURIComponent(FT_click_query);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
document.getElementById("FTquery5").innerHTML = FT_click_query;
//set the callback function
query.send(getCountryFromClick);
});
geocoder = new google.maps.Geocoder();
if (geocoder && geocodeTheCountry) {
geocoder.geocode( { 'address': CountryName+" Country"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
map.fitBounds(results[0].geometry.viewport);
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
var FT_Query = "SELECT 'geometry' FROM "+FT_TableID+" WHERE 'name_0' = '"+CountryName+"';";
var FT_Options = { suppressInfoWindows: true, query:FT_Query };
document.getElementById("FTquery").innerHTML = FT_Query;
layer = new google.maps.FusionTablesLayer(FT_TableID, FT_Options);
layer.setMap(map);
google.maps.event.addListener(layer, "click", function(event) {
infoWindow.close();
infoWindow.setContent(infoWindowContent(event.row.name.value,event.row.name_0.value));
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
});
getCountryNames();
}
function getCountryFromClick(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
//for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
if (numRows <= 1) {
return;
}
CountryName = response.getDataTable().getValue(1, 0);
// alert("CountryName="+CountryName);
DisplayCountry();
}
</script>
</head>
<body onload="initialize()">
<table style="width:100%;">
<tr><td colspan="2"><h3>Google Maps JavaScript API v3 Example: Fusion Tables Natural Earth Data Country Browser</h3></td></tr>
<tr><td colspan="2"><div id="dropdown_menu">
</div></td></tr>
<tr>
<td><div id="map_canvas"></div></td>
<td><div id="sidebar" style="width:300px;height:600px; overflow:auto"></div></td>
</tr>
<tr><td colspan="2"><div id="FTquery"></div></td></tr>
<tr><td colspan="2"><div id="FTquery2"></div></td></tr>
<tr><td colspan="2"><div id="FTquery3"></div></td></tr>
<tr><td colspan="2"><div id="FTquery4"></div></td></tr>
<tr><td colspan="2"><div id="FTquery5"></div></td></tr>
</table>
<div id="country_list"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</body>
</html>
With the new encrypted ids, you need to use the new query syntax:
layer.setQuery({select:'geometry',from:FT_TableID,where:"'name_0' = '"+CountryName+"'"});
layer.setQuery({select:'geometry',from:FT_TableID,where:"'name_0' = '"+CountryName+"' AND 'name' = '"+gpolygons[id].name+"'"});
and most important (if you only want the selected polygons to show):
layer = new google.maps.FusionTablesLayer(FT_Options);
The old "string" queries only seem to work with the numeric IDs.
working example
updated original example with new syntax
See answer above, it works for me. Thanks to geocodezip
Non numric fields should be enclosed in single quotes under double quotes, ex: " SELECT 'DATE' <= '2013-11-11' "
For complete example, you can have a look here.
Related
I have a project that is making webgis to display data on a map and a check box to display data or hide that data.
I have finished making it with the google map version, but because it is paid, I look for the free version using leaflets.
But I have a problem with the check box on the leaflet, after unchecking, the marker does not disappear.
var date = new Date();
var year = date.getFullYear();
// Center of the map
var center = [-1.1329372, 120.0350916];
// Create the map
var map = L.map("map").setView(center, 5);
// Set up the Google Map Hybrib layer
L.tileLayer("http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}", {
attribution:
"Map data #" +
year +
" Google for Dinas Kebersihan Lingkungan Hidup dan Pertamanan",
maxZoom: 18
}).addTo(map);
// Call JSON
$(document).ready(function() {
getUsers();
});
// Format Icon Leaflet
var customIcons = L.Icon.extend({});
var merahIcon = new customIcons({ iconUrl: "merah.png" }),
biruIcon = new customIcons({ iconUrl: "biru.png" }),
kuningIcon = new customIcons({ iconUrl: "kuning.png" });
var icons = {
merah: merahIcon,
biru: biruIcon,
kuning: kuningIcon
};
// Marker Group
var markerGroups = {
merah: [],
biru: [],
kuning: []
};
// Get Data
function getUsers() {
$.getJSON("json.php", function(data) {
for (var i = 0; i < data.length; i++) {
var location = new L.LatLng(data[i].latitude, data[i].longitude);
var name = data[i].name;
var description = data[i].description;
var type = data[i].type;
var marker = createMarker(location, name, description, type);
}
});
}
// Create Marker
function createMarker(location, name, description, type) {
var content = "<b>" + name + "</b> <br/>" + description;
var marker = L.marker(location, { icon: icons[type] })
.bindPopup(content)
.addTo(map);
if (!markerGroups[type]) markerGroups[type] = [];
console.log(markerGroups[type]);
markerGroups[type].push(marker);
var html = "<b>" + name + "</b> <br/>" + address;
return marker;
}
// Create Checkbox Button
function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (!marker.getVisible()) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
#map {
height: 600px;
}
<link
rel="stylesheet"
href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div class="map_wrap">
<div class="siderbarmap">
<ul>
<input
id="merahCheckbox"
type="checkbox"
onclick="toggleGroup('merah')"
checked="checked"
autocomplete="off"
/>
<label>Merah</label
><br />
<input
id="biruCheckbox"
type="checkbox"
onclick="toggleGroup('biru')"
checked="checked"
autocomplete="off"
/>
<label>Biru</label
><br />
<input
id="kuningCheckbox"
type="checkbox"
onclick="toggleGroup('kuning')"
checked="checked"
autocomplete="off"
/>
<label>Kuning</label
><br />
</ul>
</div>
<div id="map"></div>
</div>
i found new method, thx for re
function toggleGroup(type) {
if ($('.leaflet-pane img[src="'+type+'.png"]').is(':hidden')){
$('.leaflet-pane img[src="'+type+'.png"]').show();
} else {
$('.leaflet-pane img[src="'+type+'.png"]').hide();
}
}
I am trying to make a website using the google maps javascript API to find hotels around a city, and compare the distances between each hotel to user-entered locations in order to find the hotel closest to all the locations they want to visit.
First it calculates the coordinates of the user-entered locations (using the geocoding API which works fine), and then it gets the coordinates/google places information of the hotels.
Using the google.maps.geometry.spherical.computeDistanceBetween(LatLng a, LatLng b); to get the distance between each hotel and the user-entered addresses, the function returns this error:
Uncaught TypeError: Cannot read property 'lat' of undefined
However, both of the LatLng arguments I pass to the function don't seem to be null or undefined.
Each of the if(location1 != ""), if(location2 != ""), etc. code blocks checks if the LatLng objects for either the hotel or the location is null and prints an error if it is, but these errors are not printed in the javascript console when i run the webpage.
Here is the Javascript and HTML in question:
var map;
var infowindow;
function initMap() {
var pyrmont = {lat: -33.867, lng: 151.195};
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
infowindow = new google.maps.InfoWindow();
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
var nearbyHotels = [];
var cityCoordinates;
var cityCoordinatesLatLng;
function findHotels()
{
var nearbyHotelsLat = [];
var nearbyHotelsLong = [];
var locationScores1 = [];
var locationScores2 = [];
var locationScores3 = [];
var locationScores4 = [];
var locationScores5 = [];
var avgScores = [];
var geocoder = new google.maps.Geocoder();
var cityAddress = document.getElementById('locations_cityField').value;
var radiusSearch = parseInt(document.getElementById('locations_rangeField').value);
var location1 = document.getElementById('locations_location1').value;
var location2 = document.getElementById('locations_location2').value;
var location3 = document.getElementById('locations_location3').value;
var location4 = document.getElementById('locations_location4').value;
var location5 = document.getElementById('locations_location5').value;
var location1LatLng;
var location2LatLng;
var location3LatLng;
var location4LatLng;
var location5LatLng;
if(location1 != "" && location1 != undefined)
location1LatLng = geocodeAddress(geocoder, location1);
if(location2 != "" && location2 != undefined)
location2LatLng = geocodeAddress(geocoder, location2);
if(location3 != "" && location3 != undefined)
location3LatLng = geocodeAddress(geocoder, location3);
if(location4 != "" && location4 != undefined)
location4LatLng = geocodeAddress(geocoder, location4);
if(location5 != "" && location5 != undefined)
location5LatLng = geocodeAddress(geocoder, location5);
console.log(location1LatLng);
var cityLoc = geocodeAddress(geocoder, cityAddress);
setTimeout(function(){
var coordSplit = cityCoordinates.split(",");
var lati = parseFloat(coordSplit[0]);
var lngi = parseFloat(coordSplit[1]);
var city = {lat: lati, lng: lngi};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: city,
radius: radiusSearch,
types: ['lodging']
}, callback);
map.setCenter(cityLoc);
setTimeout(function(){
console.log("nearbyHotels.length: " + nearbyHotels.length);
if(location1 != "")
{
for(var i = 0; i < nearbyHotels.length; i++)
{
var hotelLatLng = nearbyHotels[i].geometry.location;
if(location1LatLng == "")
{
console.log("NULL LOCATION1LATLNG");
}
if(hotelLatLng == "")
{
console.log("NULL (1) HOTELLATLNG");
}
var dist = google.maps.geometry.spherical.computeDistanceBetween(location1LatLng, hotelLatLng);
locationScores1.push(dist);
}
}
if(location2 != "")
{
for(var i = 0; i < nearbyHotels.length; i++)
{
var hotelLatLng = nearbyHotels[i].geometry.location;
if(location2LatLng == "")
{
console.log("NULL LOCATION2LATLNG");
}
if(hotelLatLng == "")
{
console.log("NULL (2) HOTELLATLNG");
}
var dist = google.maps.geometry.spherical.computeDistanceBetween(location2LatLng, hotelLatLng);
locationScores2.push(dist);
}
}
if(location3 != "")
{
for(var i = 0; i < nearbyHotels.length; i++)
{
var hotelLatLng = nearbyHotels[i].geometry.location;
if(location3LatLng == "")
{
console.log("NULL LOCATION3LATLNG");
}
if(hotelLatLng == "")
{
console.log("NULL (3) HOTELLATLNG");
}
var dist = google.maps.geometry.spherical.computeDistanceBetween(location3LatLng, hotelLatLng);
locationScores3.push(dist);
}
}
if(location4 != "")
{
for(var i = 0; i < nearbyHotels.length; i++)
{
var hotelLatLng = nearbyHotels[i].geometry.location;
if(location4LatLng == "")
{
console.log("NULL LOCATION4LATLNG");
}
if(hotelLatLng == "")
{
console.log("NULL (4) HOTELLATLNG");
}
var dist = google.maps.geometry.spherical.computeDistanceBetween(location4LatLng, hotelLatLng);
locationScores4.push(dist);
}
}
if(location5 != "")
{
for(var i = 0; i < nearbyHotels.length; i++)
{
var hotelLatLng = nearbyHotels[i].geometry.location;
if(location5LatLng == "")
{
console.log("NULL LOCATION5LATLNG");
}
if(hotelLatLng == "")
{
console.log("NULL (5) HOTELLATLNG");
}
var dist = google.maps.geometry.spherical.computeDistanceBetween(location5LatLng, hotelLatLng);
locationScores5.push(dist);
}
}
for(var i = 0; i < nearbyHotels.length; i++)
{
var avgDist;
var numLocations = 0;
if(location1 != "")
{
numLocations++;
avgDist += locationScores1[i];
}
if(location2 != "")
{
numLocations++;
avgDist += locationScores2[i];
}
if(location3 != "")
{
numLocations++;
avgDist += locationScores3[i];
}
if(location4 != "")
{
numLocations++;
avgDist += locationScores4[i];
}
if(location5 != "")
{
numLocations++;
avgDist += locationScores5[i];
}
avgDist = avgDist / numLocations;
avgScores.push(avgDist);
}
var avgScoresSorted = avgScores.sort(function (a, b) {
return b - a;
});
for(var i = 0; i < avgScoresSorted.length; i++)
{
var index = avgScores.indexOf(avgScoresSorted[i]);
var hotelName = nearbyHotels[index].name;
var hotelAddress = nearbyHotels[index].vicinity;
document.getElementById("displayHotelsDiv").innerHTML += (i + 1) + ": " + hotelName + " (" + hotelAddress + ") - LocationScore: " + avgScoresSorted[i];
}
}, 10000);
}, 5000);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
console.log(results[i]);
createMarker(results[i]);
nearbyHotels.push(results[i]);
}
}
}
function initSearchButtonListener()
{
document.getElementById('button_searchhotels').addEventListener('click', function() {
findHotels();
});
initMap();
}
function geocodeAddress(geocoder, address) {
console.log("address " + address);
console.log("geocoder " + geocoder);
geocoder.geocode({'address': address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var coords = results[0].geometry.location.toString();
console.log("CoordsRaw: " + coords)
var coordsNoFirst = coords.substring(1);
var coordsNoLast = coordsNoFirst.slice(0, -1);
cityCoordinates = coordsNoLast;
console.log(cityCoordinates);
return results[0].geometry.location;
} else {
alert('Could not convert an address to latitude/longitude for the google maps API: ' + status);
}
});
}
And the html that goes along with it:
<div class="container" id="locations">
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="locations_location1" placeholder="Enter address of the 1st location">
</div>
<div class="col-md-6">
<input type="text" class="form-control" id="locations_location2" placeholder="Enter address of the 2nd location">
</div>
</div>
<br></br>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="locations_location3" placeholder="Enter address of the 3rd location">
</div>
<div class="col-md-6">
<input type="text" class="form-control" id="locations_location4" placeholder="Enter address of the 4th location">
</div>
</div>
<br></br>
<div class="row" style="text-align:center">
<div class="col-md-6">
<input type="text" class="form-control" id="locations_location5" placeholder="Enter address of the 5th location">
</div>
</div>
<br></br>
<div class="row">
<div id="locationField">
<input type="text" class="form-control" id="locations_cityField" placeholder="Enter a city" type="text" />
</div>
<div id="rangeField">
<input type="text" class="form-control" id="locations_rangeField" placeholder="Enter a search radius in meters (from the city center)" type="text" />
</div>
</div>
<div style="text-align:center">
<div id="map" style="width: 800px; height: 400px;"></div>
</div>
<button id="button_searchhotels" class="btn btn-success btn-lg">Search</button>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVVnR7yKErwMDd6yC-GzVpRXFvNTtoKhQ&signed_in=true&libraries=places,geometry&callback=initSearchButtonListener"
async defer></script>
The geocoder is asynchronous, you can't return anything from its callback function. You have to use the data inside the callback function when/where it is available. Duplicate of How do I return the response from an asynchronous call?
This is incorrect:
function geocodeAddress(geocoder, address) {
console.log("address " + address);
console.log("geocoder " + geocoder);
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var coords = results[0].geometry.location.toString();
console.log("CoordsRaw: " + coords)
var coordsNoFirst = coords.substring(1);
var coordsNoLast = coordsNoFirst.slice(0, -1);
cityCoordinates = coordsNoLast;
console.log(cityCoordinates);
//*********** this will not do anything useful **********
return results[0].geometry.location;
//*******************************************************
} else {
alert('Could not convert an address to latitude/longitude for the google maps API: ' + status);
}
});
}
I am making a map and I want to use the value from the database to be used as the coordinates in the javascript. Please see below:
I want to change the default values of the longitude and latitude by fetching data fro the database but I don't know how.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" t type="text/javascript"></script>
<script type="text/javascript">
function LatiPoint(options)
{
this.UserName = "";
this.JobType = "";
this.UserMood = "";
this.Latitude = "";
this.Longitude = "";
this.Pic = "";
this.Color = "red";
this.OpenInfoWindowInitial = false;
if (options != null)
{
this.UserName = options.UserName;
this.JobType = options.JobType;
this.UserMood = options.UserMood;
this.Latitude = options.Latitude;
this.Longitude = options.Longitude;
this.Pic = options.Pic;
this.Color = ( options.Color == null ? "red" : options.Color );
this.OpenInfoWindowInitial = ( options.OpenInfoWindowInitial == null ? false : options.OpenInfoWindowInitial );
}
}
</script>
<script type="text/javascript">
var LatiPts = new Array();
LatiPts[0] = new LatiPoint({UserName:'Dukot',JobType:'Balulang Cagayan De Oro',UserMood:'drinking beer',Latitude:8.4542363,Longitude:124.63189769999997,Color:'yellow',OpenInfoWindowInitial:true,Pic:''});
LatiPts[1] = new LatiPoint({UserName:'Alot',JobType:'Cagayan De Oro',UserMood:'with classmates',Latitude:8.458353831903118,Longitude:124.63627706511227,Color:'yellow',OpenInfoWindowInitial:true,});
LatiPts[2] = new LatiPoint({UserName:'Lindongan',JobType:'SM Cagayan De Oro',UserMood:'feeling bored',Latitude:8.456188949479728,Longitude:124.62177167875973,Color:'yellow',OpenInfoWindowInitial:true,});
LatiPts[3] = new LatiPoint({UserName:'Galal',JobType:'Carmen Cagayan De Oro',UserMood:'beer',Latitude:8.467607505884205,Longitude:124.62271581633297,Color:'yellow',OpenInfoWindowInitial:true,});
LatiPts[4] = new LatiPoint({UserName:'Belen',JobType:'Cagayan De Oro',UserMood:'beer',Latitude:8.46332028090713,Longitude:124.63537584288326,Color:'yellow',OpenInfoWindowInitial:true,});
</script>
<script type="text/javascript">
//<![CDATA[
var infoWindows = [];
var markers = [];
// A function to create the marker and set up the event window
function createMarker(map, point, title, icon) {
var marker = new google.maps.Marker();
marker.setMap(map);
marker.setPosition(point);
marker.setTitle(title);
marker.setIcon(icon)
google.maps.event.addListener(marker, 'click', function() {
for (var i = 0; i < infoWindows.length; i++)
infoWindows[i].setZIndex(0);
infoWindows[marker.counter].setZIndex(1);
infoWindows[marker.counter].open(marker.getMap(), marker);
});
return marker;
}
function createInfoWindow(html)
{
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(html);
infoWindow.setZIndex(0);
return infoWindow;
}
function initialize() {
// Create the Google Map
var map = new google.maps.Map(document.getElementById("map"));
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.setCenter(new google.maps.LatLng(0,0));
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < LatiPts.length; i++) {
var lpt = LatiPts[i];
var point = new google.maps.LatLng(lpt.Latitude, lpt.Longitude);
var html = "<span style='font-family:Arial;font-size:9pt'>";
html += "<span style='font-size:12pt;font-weight:bold'>" + lpt.UserName + "</span><br />";
html += lpt.UserMood.substring(0, 30) + "<br/>";
html += lpt.JobType.substring(0, 30) + "<br/>";
html += "</span>";
var imgPath
if(lpt.Pic != "") {
imgPath = lpt.Pic
} else {
imgPath = "http://maps.gstatic.com/intl/en_ALL/mapfiles/marker.png"
}
//alert("imgPath = " + imgPath + " Pic: " + lpt.Pic)
var icon = new google.maps.MarkerImage(imgPath);
//icon.shadowSize = GSize.ZERO;
var infoWindow = createInfoWindow(html);
infoWindow.open();
var marker = createMarker(map, point, lpt.UserName, icon);
marker.setZIndex(0);
marker.counter = i;
if (LatiPts[i].OpenInfoWindowInitial)
{
infoWindow.open(marker.getMap(), marker);
}
infoWindows.push(infoWindow);
markers.push(marker);
bounds.extend(point);
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
function handleNoFlash(code)
{
if ( code == GStreetviewPanorama.ErrorValues.FLASH_UNAVAILABLE )
alert( 'You need flash player to view the panorama.' );
}
function convertLatLngToString(latlng)
{
var hour = parseInt(latlng)
var min = parseInt((latlng - hour) * 60)
var second = (((latlng - hour) * 60) - min) * 60
return (hour + "° " + min + "' " + second.toFixed(2) + "" ");
}
//]]>
</script>
<style type="text/css">
/*give the body height:100% so that its child
elements can have percentage heights*/
body{ margin:0;padding:0;height:100% }
div.fullscreen{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index: 9999;
margin: 0;
padding: 0;
background: inherit;
}
</style>
</head>
<body onload="initialize()">
<div id="map" class="fullscreen" style="width:100%; height:100%"></div>
<div id="streetview" style="width: 650px; height: 400px; display: none;"></div>
<noscript>
<b>JavaScript must be enabled in order for you to use Google Maps.</b>
</noscript>
</body>
</html>
You can do something like this:
<?php /* read from database into variable $results*/ ?>
this.UserName = "<?php echo $results; ?>";
Hope it helps :)
This is kind of an update to a question I asked earlier but never got an answer here previous question. I've got a google map that creates and loads different categories of markers from an xml file when the corresponding checkbox is clicked and then updates the list on a sidebar. I'd like to load each category into its own separate sidebar so I can split them up or stack them side-by-side, etc. When I click the check-boxes the first list (the list of huts) gets loaded into both sidebars but the second list (list of yurts) gets loaded correctly into its corresponding sidebar. I don't understand why one list gets loaded into both sidebars but the other list gets loaded correctly into just one. Thanks in advance for any help. The code is all below:
Javascript
var side_bar_html = "";
//var for kml route layers
var routes = {
y: {
name: "Winter Routes",
url: "http://www.huts.org/Tests/Maps/GPSTracks/Margys_MacV2.kml"
},
z: {
name: "Summer Routes",
url: "http://www.huts.org/Tests/Maps/GPSTracks/Telluride_to_Last_Dollar.kml"
},
};
var gmarkers = [];
var gicons = [];
var map = null;
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(100,150)
});
gicons["ltblue"] = new google.maps.MarkerImage("images/marker2_ltblue.png");
var iconImage = new google.maps.MarkerImage('images/marker2_ltblue.png');
function getMarkerImage(iconColor) {
if ((typeof(iconColor)=="undefined") || (iconColor==null)) {
iconColor = "ltblue";
}
if (!gicons[iconColor]) {
gicons[iconColor] = new google.maps.MarkerImage("images/marker2_"+ iconColor +".png");
}
return gicons[iconColor];
}
function category2color(category) {
var color = "ltblue";
switch(category) {
case "huts": color = "ltblue";
break;
case "yurts": color = "orange";
break;
case "demohuts": color = "red";
break;
default: color = "ltblue";
break;
}
return color;
}
gicons["huts"] = getMarkerImage(category2color("huts"));
gicons["yurts"] = getMarkerImage(category2color("yurts"));
gicons["demohuts"] = getMarkerImage(category2color("demohuts"));
// A function to create the marker and set up the event window
function createMarker(latlng,name,html,category) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: gicons[category],
map: map,
title: name,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
// === Store the category and name info as a marker properties ===
marker.mycategory = category;
marker.myname = name;
gmarkers.push(marker);
//google.maps.event.addListener(marker, 'click', function() {
// infowindow.setContent(contentString);
// infowindow.open(map,marker);
// });
google.maps.event.addListener(marker, 'click', function() {
var testimonial = document.getElementById('hutMapinfo');
testimonial.innerHTML = contentString;
});
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(category+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(category+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
infowindow.close();
}
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
// == rebuild the side bar
makeSidebar();
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
var html = "";
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
html += '<a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+ i +'].setAnimation(google.maps.Animation.BOUNCE)" onmouseout="gmarkers['+ i +'].setAnimation(null)">' + gmarkers[i].myname + '<\/a><br>';
}
document.getElementById(gmarkers[i].mycategory+"side_bar").innerHTML = html;
}
}
function initialize() {
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(39.192948, -105.089823),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//google.maps.event.addListener(map, 'click', function() {
// infowindow.close();
// });
// Read the data
downloadUrl("coloradoYurtsToggleTest.xml", function(doc) {
var xml = xmlParse(doc);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var name = markers[i].getAttribute("label");
var html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
var category = markers[i].getAttribute("category");
var season = markers[i].getAttribute("season");
// create the marker
var marker = createMarker(point,name,html,category);
}
// == show or hide the categories initially ==
show("huts");
hide("yurts");
// == create the initial sidebar ==
makeSidebar();
});
createRouteTogglers();
}
// the important function... routes[id].xxxxx refers back to the top
function toggleRoute(checked, id) {
if (checked) {
var layer = new google.maps.KmlLayer(routes[id].url, {
preserveViewport: true,
suppressInfoWindows: false
});
// store kml as obj
routes[id].obj = layer;
routes[id].obj.setMap(map);
}
else {
routes[id].obj.setMap(null);
delete routes[id].obj;
}
};
// create the Routes controls
function createRouteTogglers() {
var html = "<form><ul>";
for (var prop in routes) {
html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" +
" onclick='highlight(this,\"selector-" + prop + "\"); toggleRoute(this.checked, this.id)' \/>" +
routes[prop].name + "<\/li>";
}
html += "<\/ul><\/form>";
document.getElementById("routeLayers").innerHTML = html;
};
// Append Class on Select
function highlight(box, listitem) {
var selected = 'selected';
var normal = 'normal';
document.getElementById(listitem).className = (box.checked ? selected: normal);
};
html
<!DOCTYPE html>
<html>
<head>
<title>10th Mountain Division Hut Association</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps Javascript API v3 Example: Marker Categories</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/10thMtn2.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="GXml.js"></script>
<script type="text/javascript" src="downloadxml.js"></script>
<script type="text/javascript" src="xmlToggle2.js"></script>
<title>Google Maps</title>
</head>
<body onload="initialize()">
<?php include('includes/header3.php'); ?>
<div id="map_canvas" style="width:65%; height:625px;"></div>
<div id="toggle_box">
<div id="routeLayers"></div>
<form action="#">
<img src="images/marker2_ltblue.png"> Huts: <input type="checkbox" id="hutsbox" onclick="boxclick(this,'huts')" />
<img src="images/marker2_orange.png"> Yurts: <input type="checkbox" id="yurtsbox" onclick="boxclick(this,'yurts')" />
</form>
<div id="hutsside_bar">
</div>
<div id="yurtsside_bar">
</div>
</div>
<div id="hutMapinfo"></div>
<?php include('includes/footer.php'); ?>
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
</body>
</html>
xml snippet
<?xml version="1.0" encoding="UTF-8"?>
<markers>
<marker lat="39.369804" lng="-106.388725" label="10th Mountain Division Hut" category="huts" season="winter">
<infowindow>
<![CDATA[
<div class="info">
<button class="tiny radius" id="closer">X</button>
<h5>10th Mountain Division Hut</h5>
<div class="hutMapTitle">
<img src="http://www.huts.org/images/10thMtn/10thMountainsmall.jpg"/>
<h6>10th Mountain Hut System</h6>
<h6>(970)925-5775</h6>
</div>
<div class="hutMapList">
<ul>
<li>10th Mtn Division Huts Website</li>
<li>Book This Hut</li>
<li><span class="subheading">Seasons:</span> Winter & Summer</li>
<li><span class="subheading">Price:</span> $33 per person</li>
<li><span class="subheading">Capacity:</span> 16 people</li>
<li><span class="subheading">Distance:</span> 4.4 miles</li>
<li><span class="subheading">Elevation Gain:</span> 1200ft
</ul>
</div>
<p>Nestled at timberline below the majestic peaks of the Colorado Continental Divide, 10th Mountain Division Hut forms a perfect destination for a single hut trip or ski-through using other nearby huts. In summer, dozens of hiking and cycling routes start or end just outside the door.</p></div>]]></infowindow>
</marker>
<marker lat="37.059971" lng="-106.480865" label="Trujillo Meadows Yurt" category="yurts">
<infowindow>
<![CDATA[
<div class="info">
<button class="tiny radius" id="closer">X</button>
<h5>Trujillo Meadows Yurt</h5>
<div class="hutMapTitle">
<img src="http://www.huts.org/images/GMaps/trujilloMeadowsYurt.jpg"/>
<h6>Southwest Nordic Center</h6>
<h6>(575)758-4761</h6>
</div>
<div class="hutMapList">
<ul>
<li>Southwest Nordic Website</li>
<li>Book This Hut</li>
<li><span class="subheading">Seasons:</span> Winter & Summer</li>
<li><span class="subheading">Price:</span> $125 per night</li>
<li><span class="subheading">Capacity:</span> 10 people</li>
<li><span class="subheading">Distance:</span> 4.1 miles</li>
<li><span class="subheading">Elevation Gain:</span> 380ft</li>
</ul>
</div>
<p>Located north Cumbres Pass in south central Colorado, the Trujillo Meadows Yurt is gentle open slopes out the front door of the yurt perfect for beginning and intermediate telemarkers. Advanced skiers will have fun looking for shots on the extensive north facing tree slopes. A full day loop is possible up to the Flat Mtn. ridge and back via the Los Pinos Creek.</p></div>]]></infowindow>
</marker>
</markers>
Your makeSidebar function has an issue (it is doing what you coded it to do, which is the behavior you are seeing):
function makeSidebar() {
var html = "";
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
html += '<a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+ i +'].setAnimation(google.maps.Animation.BOUNCE)" onmouseout="gmarkers['+ i +'].setAnimation(null)">' + gmarkers[i].myname + '<\/a><br>';
}
document.getElementById(gmarkers[i].mycategory+"side_bar").innerHTML = html;
}
}
If you want unique text for each "sidebar", you should make a unique version of "html" for each sidebar. Something like this:
var html = null;
function makeSidebar() {
// empty any pre-existing sidebar entries
for (i in html) {
document.getElementById(i+"side_bar").innerHTML = "";
}
html = []; // make html an array
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
// make entry for category if it doesn't already exist
if (!html[gmarkers[i].mycategory])
html[gmarkers[i].mycategory] = "";
// add the entry to the sidebar specific to the category
html[gmarkers[i].mycategory] += '<a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+ i +'].setAnimation(google.maps.Animation.BOUNCE)" onmouseout="gmarkers['+ i +'].setAnimation(null)">' + gmarkers[i].myname + '<\/a><br>';
}
}
for (i in html) {
document.getElementById(i+"side_bar").innerHTML = html[i];
}
}
working fiddle
The code below works great in Firefox and Safari, no issues. In IE, the markers don't load at all and in Chrome, the markers load but when you click on a marker, the infobox does not pop up. If you click in on the side menu it does pop up. Any ideas? Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Activities</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&sensor=false""></script>
<script type="text/javascript" src="GoogleMaps/Scripts/downloadxml.js"></script>
<script type="text/javascript" src="GoogleMaps/Scripts/infobubble_tabs.js"></script>
<style type="text/css">
html, body { height: 100%; }
.style1
{
width: 758px;
}
.style2
{
width: 349px;
}
#side_bar
{
height: 550px;
width: 349px;
overflow:scroll;
}
</style>
<script type="text/javascript">
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
var gmarkers = [];
var gicons = [];
var map = null;
var InfoBubble = new InfoBubble({
maxWidth: 300
});
//defines icon if there is none stated
gicons["red"] = new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(9, 9));
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var iconImage = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png',
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(9, 9));
var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
new google.maps.Size(37, 34),
new google.maps.Point(0, 0),
new google.maps.Point(9, 9));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which traces out a polygon as a series of X,Y points. The final coordinate closes
//the poly by connecting to the first coordinate.
var iconShape = {
coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
type: 'poly'
};
//determines icon based on category
//if no icon is defined
function getMarkerImage(iconColor) {
if ((typeof (iconColor) == "undefined") || (iconColor == null)) {
iconColor = "red";
}
if (!gicons[iconColor]) {
gicons[iconColor] = new google.maps.MarkerImage(iconColor,
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(9, 9));
}
return gicons[iconColor];
}
function category2icon(category) {
var color = "red";
switch (category) {
case "Hike": color = "GoogleMaps/Images/HikingIcon.jpg";
break;
case "KML": color = "GoogleMaps/Images/kml.gif";
break;
case "Camping": color = "GoogleMaps/Images/camping.gif";
break;
case "StatePark": color = "GoogleMaps/Images/statepark.jpg";
break;
case "NationalPark": color = "GoogleMaps/Images/NationalPark_icon.png";
break;
case "PointsofInterest": color = "GoogleMaps/Images/POI.png";
break;
case "CountyPark": color = "GoogleMaps/Images/CountyPark_Icon.png";
break;
case "Biking": color = "GoogleMaps/Images/Bike_icon.jpg";
break;
case "FishWildlifeService": color = "GoogleMaps/Images/FishWildlife_icon.gif";
break;
case "Kayak": color = "GoogleMaps/Images/kayaking.png";
break;
case "Shelter": color = "GoogleMaps/Images/Shelter_Icon.png";
break;
case "Parking": color = "GoogleMaps/Images/Parking_Lot_Icon.png";
break;
default: color = "red";
break;
}
return color;
}
gicons["Hike"] = getMarkerImage(category2icon("Hike"));
gicons["KML"] = getMarkerImage(category2icon("KML"));
gicons["Camping"] = getMarkerImage(category2icon("Camping"));
gicons["StatePark"] = getMarkerImage(category2icon("StatePark"));
gicons["NationalPark"] = getMarkerImage(category2icon("NationalPark"));
gicons["PointsofInterest"] = getMarkerImage(category2icon("PointsofInterest"));
gicons["CountyPark"] = getMarkerImage(category2icon("CountyPark"));
gicons["Biking"] = getMarkerImage(category2icon("Biking"));
gicons["FishWildlifeService"] = getMarkerImage(category2icon("FishWildlifeService"));
gicons["Kayak"] = getMarkerImage(category2icon("Kayak"));
gicons["Shelter"] = getMarkerImage(category2icon("Shelter"));
gicons["Parking"] = getMarkerImage(category2icon("Parking"));
// A function to create the marker and set up the event window
function createMarker(latlng, name, url, detail_tab, notes_tab, map_tab, hiking_detail_tab, camping_detail_tab, category, state) {
var contentString_detail = detail_tab;
var contentString_notes = notes_tab;
var contentString_maps = map_tab;
var contentString_hiking_detail = hiking_detail_tab;
var contentString_camping_detail = camping_detail_tab;
var marker = new google.maps.Marker({
position: latlng,
icon: gicons[category],
shadow: iconShadow,
map: map,
title: name,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
// === Store the category and name info as a marker properties ===
marker.mycategory = category;
marker.mystate = state;
marker.myname = name;
gmarkers.push(marker);
// to open the info bubbles
google.maps.event.addListener(marker, 'click', function () {
InfoBubble.open(map, marker);
InfoBubble.removeTab(4);
InfoBubble.removeTab(3);
InfoBubble.removeTab(2);
InfoBubble.removeTab(1);
InfoBubble.removeTab(0);
if (category == "KML") {
window.open("" + url);
}
if (!category == "KML") {
InfoBubble.addTab('Details', contentString_detail);
}
if (!notes_tab == "") {
InfoBubble.addTab('Notes', contentString_notes);
}
if (!map_tab == "") {
switch (category) {
case "Camping": InfoBubble.addTab('Campsite Map', contentString_maps);
break;
case "Hike": InfoBubble.addTab('Trail Map', contentString_maps);
break;
}
}
if (!hiking_detail_tab == "") {
InfoBubble.addTab('Trail Notes', contentString_hiking_detail);
}
if (!camping_detail_tab == "") {
InfoBubble.addTab('Campsite Notes', contentString_camping_detail);
}
});
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(category + "box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(category + "box").checked = false;
// == close the info window, in case its open on a marker that we just hid
InfoBubble.close();
}
// == a checkbox has been clicked ==
function boxclick(box, category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
// == rebuild the side bar
makeSidebar();
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
var html = "";
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;
}
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(39.364032, -77.182159),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Closes any open bubbles before opening new one
google.maps.event.addListener(map, 'click', function () {
InfoBubble.close();
});
//Downloads the data from xml file
// Reads the data the creates each tab
downloadUrl("GoogleMaps/categories.xml", function (doc) {
var xml = xmlParse(doc);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat, lng);
var address = markers[i].getAttribute("address");
var city = markers[i].getAttribute("city");
var state = markers[i].getAttribute("state");
var zip = markers[i].getAttribute("zip");
var name = markers[i].getAttribute("name");
var notes = markers[i].getAttribute("notes");
var url = markers[i].getAttribute("url");
var hike_distance = markers[i].getAttribute("hike_distance");
var hike_trail_skill_level = markers[i].getAttribute("hike_trail_skill_level");
var hike_points_of_interest = markers[i].getAttribute("hike_points_of_interest");
var Camping_Amenities = markers[i].getAttribute("Camping_Amenities");
var Camping_Best_Sites = markers[i].getAttribute("Camping_Best_Sites");
var Camping_Notes = markers[i].getAttribute("Camping_Notes");
var image = markers[i].getAttribute("image");
var category = markers[i].getAttribute("category");
//Creates data for Detail Tab
var detail_tab = "";
detail_tab += "<b>" + name + "<\/b><p>";
detail_tab += address + "</br>";
detail_tab += city + ", " + state + " " + zip + "</br>";
detail_tab += '<br><a target="_blank" href="' + url + '">' + url + '</a>' + "</br>";
//Creates data for Notes Tab
var notes_tab = notes;
//Creates data for Maps Tab
var map_tab = "";
if (image) {
map_tab += '<br><a target="_blank" href="' + image + '">' + image + '</a>' + "</br>";
}
//Creates data for Hiking Detail Tab
var hiking_detail_tab = "";
if (hike_distance) {
hiking_detail_tab += "<b>Trail Distance: </b>" + hike_distance + " miles</br>";
hiking_detail_tab += "<b>Trail Skill Level: </b>" + hike_trail_skill_level + "</br>";
hiking_detail_tab += "<b>Points of Interest: </b>" + hike_points_of_interest + "</br>";
}
//Creates data for Camping Detail Tab
var camping_detail_tab = "";
if (Camping_Notes) {
camping_detail_tab += "<b>Amenities: </b>" + Camping_Amenities + "</br>";
camping_detail_tab += "<b>Best Sites: </b>" + Camping_Best_Sites + "</br>";
camping_detail_tab += "<b>Notes: </b>" + Camping_Notes + "</br>";
}
// var kml_tab = "";
// if (category=="KML) {
// create the marker
var marker = createMarker(point, name, url, detail_tab, notes_tab, map_tab, hiking_detail_tab, camping_detail_tab, category);
}
// == show or hide the categories initially ==
show("Hike");
show("KML");
hide("Camping");
hide("StatePark");
hide("NationalPark");
hide("PointsofInterest");
hide("CountyPark");
hide("Biking");
hide("FishWildlifeService");
hide("Kayak");
hide("Shelter");
hide("Parking");
// == create the initial sidebar ==
makeSidebar();
});
}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<table border="1" >
<tr>
<td class="style1">
<div id="map" style="width:978px; height: 596px"></div>
</td>
<td valign="top" style="text-decoration: underline; color: #4444ff;"
class="style2">
<h4>To view a topo map, click map in the top left corner and select terrain from drop down menu</h4>
<div id="side_bar"></div>
</td>
</tr>
</table>
<form action="#">
Hiking: <input type="checkbox" id="Hikebox" onclick="boxclick(this,'Hike')" />
Full Trail Map: <input type="checkbox" id="KMLbox" onclick="boxclick(this,'KML')" />
Trail Shelters: <input type="checkbox" id="Shelterbox" onclick="boxclick(this,'Shelter')" />
Trail Parking: <input type="checkbox" id="Parkingbox" onclick="boxclick(this,'Parking')" />
Camping: <input type="checkbox" id="Campingbox" onclick="boxclick(this,'Camping')" />
Biking: <input type="checkbox" id="Bikingbox" onclick="boxclick(this,'Biking')" />
Kayaking: <input type="checkbox" id="Kayakbox" onclick="boxclick(this,'Kayak')" />
<br />
State Parks: <input type="checkbox" id="StateParkbox" onclick="boxclick(this,'StatePark')" />
National Parks: <input type="checkbox" id="NationalParkbox" onclick="boxclick(this,'NationalPark')" />
County Park: <input type="checkbox" id="CountyParkbox" onclick="boxclick(this,'CountyPark')" />
<br />
Points of Interest: <input type="checkbox" id="PointsofInterestbox" onclick="boxclick(this,'PointsofInterest')" />
Fish and Wildlife Service: <input type="checkbox" id="FishWildlifeServicebox" onclick="boxclick(this,'FishWildlifeService')" />
<br />
</form>
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
</body>
</html>
The error message I get in IE (9) is:
XML5617: Illegal XML character.
, line 7858 character 243
hike_points_of_interest="Arguably the prettiest trail in the Loch Raven Reservoir watershed. Follow it to Merryman Point, where the reservoir spreads out in several directions. From the parking area, you have several options to begin the hike�the trailhead farthest to the right leads to a narrow path that runs alongside the reservoir, the farthest to the left runs to a fire road, and the second to the left (the one I take) runs along a wide path but not before going along a narrower path, which will eventually afford nice views of the reservoir and give you the option of linking with the fire road."