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
|
<!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>Google Maps Markers</title>
<style type="text/css">
#map{
position:absolute;top:10px;left:10px;width:1024px; height: 650px
}
#essai{
position:absolute;top:500px;left:200px;width:150px; height: 24px;
z-index: 3;
}
#infoWindow a {
color:white;
}
.class_infoWindow{
padding:2px;
margin:0px;
height:60px;
color:white;
background-color:green;
}
.tooltip{width:200px;margin:0;padding:5px;font-size:11px;color:#666;background:#fff;border:5px solid #ccc;}
.tooltip p{margin:0;text-align:justify;}
#tooltip_id{background:#fff;border-color:#8c6;}
</style>
<!-- script Google Maps -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<!-- script Jquery -->
<script type="text/javascript" src="../libjs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../libjs/jquery/jquery.simpletooltip-min.js"></script>
<script type="text/javascript">
var latcentrecarto = 47.58879945676841;
var longcentrecarto = -2.8348159790039062;
var centreCarte = new google.maps.LatLng(latcentrecarto, longcentrecarto);
var zoominitialcarto = 11;
var image_marker= "images/icones_site/photo.jpg";
var mymap;
// fonction jquery tooltip
$(function(){
$("a.delay").simpletooltip({hideDelay: 0.5});
});
function construction_carte() {
var optionsCarte = {
zoom: zoominitialcarto,
center: centreCarte,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl : true
};
mymap = new google.maps.Map(document.getElementById("map"), optionsCarte);
}
function placement_infowindow_marqueur() {
var contentString ='<div id="infoWindow" class="class_infoWindow"><p>Je vais ... <a href="#tooltip_id" class="delay">voir</a></p></div>';
var optionsWindow = {
content :contentString ,
position : centreCarte,
zIndex : 3,
};
var infowindow=new google.maps.InfoWindow(optionsWindow);
var optionsMarqueur = {
icon : image_marker,
position : centreCarte,
zIndex : 3,
};
var marker=new google.maps.Marker(optionsMarqueur);
marker.setMap(mymap);
google.maps.event.addListener (marker,"click", function() {
infowindow.open(mymap);});
}
function load() {
construction_carte();
placement_infowindow_marqueur();
}
</script>
</head>
<body onload="load()">
<div id="map"></div>
<div id="tooltip_id" class="tooltip"><p>nom de lieu, code carte, ou champ vide pour position actuelle (veuillez actualisez votre position en cliquant sur le bouton situé sous la carte à droite)</p></div>
<div id="essai"><p>Je vais ... <a href="#tooltip_id" class="delay">voir</a></p></div>
</body>
</html> |
Partager