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
| <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="gmap3.js"></script>
<style>
body{
text-align:center;
}
.gmap3{
margin: 20px auto;
border: 1px dashed #C0C0C0;
width: 900px;
height: 350px;
}
</style>
<?php
$mlat=xx;
$mlng=yy;
$lib='nom';
$adr='nnn';
?>
<script type="text/javascript">
$(function(){
$('#test1').gmap3({
map:{
options:{
center:[<?php echo $mlat; ?>,<?php echo $mlng; ?>],
zoom: 12
}
},
marker:{
values:[
{latLng:[<?php echo $mlat; ?>,<?php echo $mlng; ?>], data:"<div style=text-align:left; font-weight:bold><?php echo $lib; ?></div><divstyle=text-align:center>Adresse : <?php echo $adr; ?></div>"}
],
options:{
draggable: false,
},
events:{
mouseover: function(marker, event, context){
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data}
}
});
}
}
}
}
});
});
</script>
<body>
<div id="test1" class="gmap3"></div>
</body>
</html> |
Partager