1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151
| <%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Affichage Markers</title>
<style type="text/css">
body {
font: normal 10pt Helvetica, Arial;
}
#map {
width: 100%;
height: 100%;
border: 100%;
padding: 100%;
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //To support the browsers IE7+, Firefox, Chrome, Opera, Safari
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); // For the browsers IE6, IE5
} else {
alert("Error due to old verion of browser upgrade your browser");
}
}
function request() {
var xhr = getXmlHttpRequestObject();
private var url="http://localhost:8082/moptgis/AffichagePoints";
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
readData(xhr.responseText);
} else if (xhr.readyState < 4) {
}
};
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(null);
}
function readData(sData) {
// On peut maintenant traiter les données sans encombrer l'objet XHR.
if (sData == "OK") {
alert("C'est bon");
} else {
alert("Y'a eu un problème");
}
}
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",new google.maps.Size(32, 32), new google.maps.Point(0, 0), new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({position : pt,icon : icon,map : map});
var popup = new google.maps.InfoWindow({content : info,maxWidth : 300});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center : new google.maps.LatLng(2.93069262, 11.41507819),
zoom : 14,
mapTypeId : google.maps.MapTypeId.ROADMAP,
mapTypeControl : false,
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl : true,
navigationControlOptions : {
style : google.maps.NavigationControlStyle.SMALL
}
});
}
center = bounds.getCenter();
map.fitBounds(bounds);
</script>
</head>
<body onload="initMap()" style="margin: 0px; border: 0px; padding: 0px;">
<div id="map"></div>
<p>
<input type="button" name="Marker" value="Afficher Marker" onclick="request()" />
</p>
</body>
</html> |
Partager