Google Map API – les infowindows et du style en ASP.NET MVC5

googlemap1      googlemap2

Google Map api fournit les librairies pour les différentes plateformes comme : mobile (Android, iOS), web (JavaScript) et web service etc. Ce blog va introduire l'utilisation de l'infowindows et l'animation du Google Map api pour les projets application web.

Pour construire une carte et afficher nos lieux en style épingle, on pourrait créer les markers en même temps :

Créer des épingles (markers)

On crée la carte dans la méthode loadMap() et on va appeler une autre méthode createMarkers() pour créer toutes les épingles et leurs infobulles :

<script>
var allMarkers = [];
var bounds = new google.maps.LatLngBounds();

function loadMap() {
	var mapOptions = {
		zoom: 6,		
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	mapResults = new google.maps.Map(document.getElementById('result-map-canvas'), mapOptions);
	google.maps.event.trigger(mapResults, 'resize');
	createMarkers();
	mapResults.fitBounds(bounds);
}

function createMarkers() {
	@for (var i = 0; i < Model.Count(); i++)
	{
		var point = Model.ElementAt(i);
		<text>
			var pos = new google.maps.LatLng('@point.Latitude', '@point.Longitude');
			bounds.extend(pos);

			var marker = new google.maps.Marker({
				position: pos,
				map: mapResults
			});							
			
			marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
			marker.setAnimation(google.maps.Animation.BOUNCE);
			setTimeout(function () {
				marker.setAnimation(null);
			}, 2000);					

			var infowindowComplex = new google.maps.InfoWindow({
				position: pos,
			});

			google.maps.event.addListener(marker, 'click', (function (marker, i) {
				return function () {
					infowindowComplex.close();                      
						$.ajax({
							type: "POST",
							url: "@Url.Action("DisplayInfowindow", "MyController")",
							data: { affaireId: '@point.Id'},
							success: function (data) {
								infowindowComplex.close();
								infowindowComplex.setContent(data);
								infowindowComplex.open(mapResults, marker);
								mapResults.setCenter(infowindow.getPosition());
								updateCheckbox();
							},
						});                  
				}
			})(marker, "@(i)"));
			
			allMarkers.push(marker);
		</text>		
	}
}
</script>

On a passé tous les markers en une liste de ViewModels qui vont être déclarés dans le .cshtml collé ci-dessous :

@model List<RapprochementResultCartoVM>

Le ViewModel contient la Latitude et la Longitude

Donc dans l’exemple on utilise une boucle à créer les markers. (La ligne 7)

On peut ajouter l’animation et le style des épingles (markers) pendant la création des markers, ou on peut les changer après avec la méthode setIcon() et setAnimation().

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function () {marker.setAnimation(null);}, 2000);				

setTimeOut pour arrêter l'animation après deux secondes.

Dans l’exemple on a utilisé l’icone de Google, vous pouvez également choisir vos propres images.

Ajouter une infobulle pour chaque marker et créer une infobulle plus riche

Dans l’exemple, on a utilisé Ajax pour créer l'infowindows de chaque marker. Dans la méthode .net DisplayInfowindow, il retourne une vue partielle qui est le html de l’infowindow. Donc dans cette vue partielle, on peut mettre toutes les informations qu’on veut.

Remarque : quand on a des infowindows très compliqués, il vaut mieux fermer l’infowindow avant de mettre les nouveaux contenus et l’ouvrir après, puisque le rechargement de l’infowindow peut être lent et risque de laisser l'utilisateur voir l’ancienne info avant de recharger. Pour une raison de performance, chargez la carte (appeler loadMap()) après la page.

Pour centraliser la carte selon les markers, on utilise le google.maps.LatLngBounds objet :

var bounds = new google.maps.LatLngBounds();

et on rajoute toutes les positions des markers dans bounds dans le boucle qui crée tous les markers :

var pos = new google.maps.LatLng('@point.Latitude', @point.Longitude');
bounds.extend(pos);

et  dans la méthode loadMap() on va utiliser la méthode fitBounds() pour centraliser la map au chargement de la page selon le rayon des markers.

mapResults.fitBounds(bounds);

Et finalement pour les démarrer:

<script>
    $(function () {
            loadMap();
    });
</script>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.