Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1    

Insérer fichier KML KMZ dans une carte Google Maps V3 et gmap3

Tutoriel publié le Mis à jour le
Tutoriel en Français

Télécharger le code : Afficher un fichier KML sur une carte

Voir un exemple d'utilisation d'un fichier KML sur http://goeast.cc.

Carte

Code

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8"/>
		<title>Votre titre de page</title>
		<style type="text/css">
			html { height: 100% }
			body { height: 100%; margin: 0px; padding: 0px }
			#maCarte{
				height: 350px;
				width: 100%;
			}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
		<script type="text/javascript"> 
			$(function(){
				$("#maCarte").gmap3(
					{
						action:"init",
						mapTypeId:google.maps.MapTypeId.TERRAIN,
						center:[51.859667,7.350874],
						zoom:5,
						disableDefaultUI:true
					},
					{
						action:"addKmlLayer",
						url:"http://maps.google.de/maps/ms?oe=UTF8&client=firefox-a&ie=UTF8&hl=de&vps=1&jsv=327b&msa=0&msid=204641735089812811439.00049fc240d6b5cd876b2&output=kml",
						options:{
							suppressInfoWindows:true,
							preserveViewport:false
						}
					}
				)
			});
		</script>
	</head>
	
	<body>
		<div id="maCarte"></div>
	</body>
</html>

 

Source

KML

Résumé

GMap3 Plugin JQuery : Afficher un fichier KML KMZ

Afficher un fichier KML KMZ