#map {
height: 500px;
}
#info-panel {
width: 300px;
height: 500px;
position: absolute;
top: 0;
right: 0;
background-color: white;
overflow-y: scroll;
}
$(document).ready(function() {
var map;
var markers = [];
var infoWindow;
var locations = [];
// Récupération des données de l’API PlugShare
$.ajax({
url: « https://api.plugshare.com/locations/chargers »,
dataType: « json »,
success: function(data) {
locations = data.locations;
initMap();
}
});
function initMap() {
// Initialisation de la carte
map = new google.maps.Map(document.getElementById(« map »), {
center: { lat: 37.0902, lng: -95.7129 },
zoom: 4
});
// Création des marqueurs pour chaque station de recharge
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var marker = new google.maps.Marker({
position: { lat: location.latitude, lng: location.longitude },
map: map
});
markers.push(marker);
// Ajout d'un événement clic sur chaque marqueur
marker.addListener("click", function() {
var location = getLocationByMarker(this);
showInfoWindow(location);
});
}
// Initialisation de la fenêtre d'informations
infoWindow = new google.maps.InfoWindow();
}
// Récupération de la station de recharge correspondant à un marqueur
function getLocationByMarker(marker) {
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
if (location.latitude === marker.getPosition().lat() && location.longitude === marker.getPosition().lng()) {
return location;
}
}
}
// Affichage de la fenêtre d'informations pour une station de recharge
function showInfoWindow(location) {
var content = "
» + location.name + «
« ;
content += «
» + location.address + «
» + location.city + « , » + location.state + »