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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Google Maps API V3] Insérer une carte</title>
<style type="text/css">
* {
font-family : Verdana, Arial;
font-size : 1em;
}
html, body {
margin : 0;
padding : 0;
height : 100%;
}
h1 {
color : #4488bb;
font-size : 1.3em;
border : 1px solid #c0c0c0;
padding : 10px;
margin : 10px;
}
#map_canvas{
margin : auto;
width : 500px;
height: 500px;
border : 1px solid #c0c0c0;
}
#content {
font-size : 0.8em;
width : 300px;
min-height : 50px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize(){
// centre de la carte
var oCentre = new google.maps.LatLng( 47.988635, -2.552033);
// les options
var mapOptions = {
zoom : 10,
center : oCentre,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// creation de la carte
var oMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// creation du marqueur
var oMarker = new google.maps.Marker({
position : oCentre,
map : oMap,
title : 'Titre du marqueur'
});
// creation bulle
var oBulle = new google.maps.InfoWindow({
content : '<div id="content"><b>Samuel Lurquin<\/b><br><a href="http://www.samuel-lurquin.com/">http://www.samuel-lurquin.com/<\/a><\/div>'
});
// ajout apparition bulle sur le click du marqueur
google.maps.event.addListener( oMarker, 'click', function() {
oBulle.open( oMap, this);
});
}
</script>
</head>
<body onload="initialize();">
<h1>[Google Maps API V3] Insérer une carte</h1>
<div id="map_canvas"></div>
</body>
</html> |
Partager