Superposition Google Maps
Superposition Google Maps<span class="color_h1"
Ajouter un marqueur dans Google Maps
Google Maps - Superpositions
Les superpositions sont des objets sur la carte qui sont liés aux coordonnées de longitude/latitude et qui se déplacent lorsque vous faites glisser ou zoomez sur la carte.
L'API Google Maps comporte plusieurs superpositions :
Les points sur la carte sont affichés à l'aide de marqueurs, affichant souvent des icônes personnalisées. Les marqueurs sont des objets de type GMarker et les icônes peuvent être personnalisées à l'aide d'objets de type GIcon.
Les lignes sur la carte sont affichées à l'aide de polylignes (représentant des collections de points). Les lignes sont des objets de type GPolyline.
Les zones sur la carte sont affichées sous forme de polygones (s'il s'agit d'une zone de forme libre) ou sous forme de superposition de base (s'il s'agit d'une zone rectangulaire). Un polygone est similaire à une polyligne fermée, il peut donc avoir n'importe quelle forme. Les superpositions au sol sont généralement utilisées pour les zones de la carte qui sont directement ou indirectement associées aux tuiles.
La carte elle-même est affichée à l'aide d'une superposition de tuiles. Si vous disposez de votre propre série de tuiles, vous pouvez utiliser la classe GTileLayerOverlay pour modifier les tuiles existantes sur la carte, ou même utiliser GMapType pour créer votre propre type de carte.
Les fenêtres d'informations constituent également une superposition spéciale. Cependant, veuillez noter que la fenêtre d'informations est automatiquement ajoutée à la carte et que la carte ne peut ajouter qu'un objet de type GInfoWindow.
Google Maps - Ajoutez des marqueurs
marques pour identifier des points sur la carte. Par défaut, ils utilisent G_DEFAULT_ICON (vous pouvez également spécifier une icône personnalisée). Le constructeur GMarker prend les objets GLatLng et GMarkerOptions (facultatifs) comme paramètres. Les balises
via setMap() Méthode pour ajouter une marque sur la carte :
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur "Exécuter l'instance" bouton pour afficher en ligne Exemple
Google Maps - Marqueur déplaçable
L'exemple suivant présentera comment utiliser l'attribut d'animation pour faire glisser le marqueur :
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var marker;
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Google Maps - Icônes
les marqueurs peuvent être affichés avec de nouvelles icônes personnalisées au lieu de celles par défaut :
Instances
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html> Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Google Maps - Polyline
L'objet GPolyline crée une superposition linéaire sur la carte. GPolyline prend une série de points et crée une série ordonnée de segments de ligne reliant ces points.
Polyline prend en charge les attributs suivants :
chemin - spécifie les coordonnées latitude/longitude de plusieurs lignes droites
StrokeColor - spécifie la valeur de couleur hexadécimale de la ligne (format : "#FFFFFF")
StrokeOpacity - spécifie la transparence de la ligne (la valeur est 0,0 à 1.0)
StrokeWeight - Définit la largeur de la ligne, en pixels.
modifiable - définit si l'utilisateur peut modifier la ligne droite (vrai/faux)
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:x,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[stavanger,amsterdam,london];
var flightPath=new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Google Maps - Polygon
Les objets GPolygon sont similaires aux objets GPolyline dans le sens où ils sont constitués d'une série ordonnée de points. Cependant, au lieu d'avoir deux extrémités comme une polyligne, un polygone est conçu pour définir une zone qui forme une boucle fermée.
Comme les polylignes, vous pouvez personnaliser la couleur, l'épaisseur et la transparence des bords (lignes) des polygones, ainsi que la couleur et la transparence des zones remplies fermées. La couleur doit être un style HTML de nombres hexadécimaux.
Les polygones prennent en charge les propriétés suivantes :
chemin - spécifiez les coordonnées de plusieurs latitudes droites (la première et la dernière coordonnées sont égales)
StrokeColor - spécifie la valeur de couleur hexadécimale de la ligne (format : "#FFFFFF")
StrokeOpacity - spécifie la transparence de la ligne (la valeur est 0,0 à 1.0)
StrokeWeight - Définit la largeur de la ligne, en pixels.
fillColor - spécifie la valeur de couleur hexadécimale de la zone fermée (format : "#FFFFFF")
fillOpacity - spécifie la couleur de remplissage Transparence (la valeur est 0.0 à 1.0)
modifiable - définit si l'utilisateur peut modifier la ligne (vrai/faux)
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:x,
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[stavanger,amsterdam,london,stavanger];
var flightPath=new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Google Maps - Cercle
Circle prend en charge les attributs suivants :
centre - spécifie le paramètre de point central du cercle google.maps .LatLng
radius - spécifie le rayon du cercle en mètres
StrokeColor - spécifie la valeur de couleur hexadécimale de l'arc (format : " #FFFFFF")
StrokeOpacity - spécifie la transparence de l'arc (la valeur est 0,0 à 1.0)
StrokeWeight - Définit la largeur de la ligne, en pixels.
fillColor - spécifie la valeur de couleur hexadécimale de la valeur de remplissage du cercle (format : "#FFFFFF")
fillOpacity - spécifie la couleur de remplissage transparence (la valeur est 0.0 à 1.0)
Définir si l'utilisateur peut modifier la ligne droite (vrai/faux)
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
function initialize()
{
var mapProp = {
center:amsterdam,
zoom:7,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html> Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Google Maps - Fenêtre d'informations
Afficher une fenêtre de message texte sur un tag :
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Google Maps - Manuel de référence de superposition
Manuel de référence de l'API Google Maps.
