en noir : code obligatoire
en vert : explications
en rouge : code personnalisable
en grisé : construction d'une carte simple par défaut
<!DOCTYPE html>
<html>
<head>
<title>Bing 3 types de marque (pushpin) en pleine fenêtre</title>
<meta charset="utf-8" />
<style>
/* style pour carte plein écran, pour limiter voir la div "carte" */
#carte {
position:relative;
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.Container{
position:relative;
height:100%;
}
.maBarre {
position:absolute;
bottom: 5px;
left: 5px;
color: #FFFFFF;
background-color: #0029AC;
}
</style>
<script type="text/javascript">
var macarte;
function InitCarte() {
macarte = new Microsoft.Maps.Map('#carte', {
center: new Microsoft.Maps.Location(43.20410534998449, 5.774952434815552),
zoom: 10
});
//ajout d'un pin rouge qui n'est pas déplaçable.
var rougePin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(43.120754105562746, 6.126714543309806), { color: '#f00' });
macarte.entities.push(rougePin);
//ajout d'un pin vert qui es déplaçable et qui de plus enregistre les coordonnées.
var vertPin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(43.122095354316315, 5.935000602549123), { color: '#0f0', draggable: true });
macarte.entities.push(vertPin);
Microsoft.Maps.Events.addHandler(vertPin, 'drag', function (e) { enregCoord('', e); });
Microsoft.Maps.Events.addHandler(vertPin, 'dragend', function (e) { enregCoord('', e); });
Microsoft.Maps.Events.addHandler(vertPin, 'dragstart', function (e) { enregCoord('', e); });
//ajout d'un pin bleu seulement déplaçable.
var bleuPin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(43.24179933895366, 5.374788320969377), { color: '#00f', draggable: true });
macarte.entities.push(bleuPin);
}
//fonction qui enregistre les coordonnées
function enregCoord(id, event) {
document.getElementById('pushpinLocation').innerText = event.target.getLocation();
}
</script>
<!-- autorisation Bing -->
<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=InitCarte&key=Ma_Key" async defer></script>
</head>
<body>
<div class="Container">
<div id="carte" ></div>
<div class="maBarre">Coordonnées du pin Vert: <span id="pushpinLocation"></span></div>
</div>
</body>
</html>