<%--
Document : index
Created on : Oct 3, 2014, 5:45:15 PM
Author : Mootangz <Benjawan Singsita>
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<title>Where is My Dogs</title>
<%@include file="../include/meta.jsp" %>
<style type="text/css">
#map_canvas {
/*width:100%;*/
height:600px;
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
/*margin:auto;*/
}
</style>
</head>
<body>
<%@include file="../include/header.jsp" %>
<div class="material">
<div class="container">
<div class="well">
<!--<a href="${pageContext.request.contextPath}/dog/ViewDog?dogId=1&reference=qrcode">qr</a>-->
<div style="margin: 10px;" id="map_canvas"></div>
<div style="margin: 10px;">
<p>
<img src="https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=F|FFFF00|000000"/> <s:text name="map.icon.found" />
<img src="https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=L|FF0000|000000"/> <s:text name="map.icon.lost" />
<img src="https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00CC00|000000"/> <s:text name="map.icon.sighting" />
</p>
</div>
</div>
</div>
<%@include file="../include/footer.jsp" %>
</div>
<%@include file="../include/script.jsp" %>
<script type="text/javascript">
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
var map;
function showPosition(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 11,
center: new google.maps.LatLng(lat, long),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lostLocations = [
<s:iterator value="lostDogUserViewList" status="rowstatus" >
['${lostLocation}', ${lostLatitude}, ${lostLongitude}, ${lostId}, ${rowstatus.count}],
</s:iterator>
['', , , , ]];
var foundLocations = [
<s:iterator value="foundDogUserViewList" status="rowstatus" >
['${foundLocation}', ${foundLatitude}, ${foundLongitude}, ${foundId}, ${rowstatus.count}],
</s:iterator>
['', , , , ]];
var sightingLocations = [
<s:iterator value="sightingDogUserViewList" status="rowstatus" >
['${sightingLocation}', ${sightingLatitude}, ${sightingLongitude}, ${sightingId}, ${rowstatus.count}],
</s:iterator>
['', , , , ]];
var foundIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=F|FFFF00|000000';
var lostIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=L|FF0000|000000';
var sightingIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00CC00|000000';
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < lostLocations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lostLocations[i][1], lostLocations[i][2]),
map: map,
icon: lostIcon
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
window.open("${pageContext.request.contextPath}/lost/ViewLost.action?lostId=" + lostLocations[i][3]);
// infowindow.setContent(lostLocations[i][0]);
// infowindow.open(map, marker);
}
})(marker, i));
}
for (i = 0; i < sightingLocations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(sightingLocations[i][1], sightingLocations[i][2]),
map: map,
icon: sightingIcon
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
window.open("${pageContext.request.contextPath}/sighting/ViewSighting.action?sightingId=" + sightingLocations[i][3]);
// infowindow.setContent(sightingLocations[i][0]);
// infowindow.open(map, marker);
}
})(marker, i));
}
for (i = 0; i < foundLocations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(foundLocations[i][1], foundLocations[i][2]),
map: map,
icon: foundIcon
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
window.open("${pageContext.request.contextPath}/found/ViewFound.action?foundId=" + foundLocations[i][3]);
// infowindow.setContent(foundLocations[i][0]);
// infowindow.open(map, marker);
}
})(marker, i));
}
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
getLocation();
</script>
</body>
</html>