Google Maps - Formes

Dans le chapitre précédent, nous avons appris à utiliser les marqueurs dans Google Maps. En plus des marqueurs, nous pouvons également ajouter diverses formes telles que des cercles, des polygones, des rectangles, des polylignes, etc. Ce chapitre explique comment utiliser les formes fournies par Google Maps.

Polylignes

Les polylignes, fournies par Google Maps, sont utiles pour suivre différents chemins. Vous pouvez ajouter des polylignes à une carte en instanciant la classegoogle.maps.Polyline. Lors de l'instanciation de cette classe, nous devons spécifier les valeurs requises des propriétés d'une polyligne telles que StrokeColor, StokeOpacity et strokeWeight.

On peut ajouter une polyligne à une carte en passant son objet à la méthode setMap(MapObject). Nous pouvons supprimer la polyligne en passant une valeur nulle à la méthode SetMap ().

Exemple

L'exemple suivant montre une polyligne mettant en évidence le chemin entre les villes de Delhi, Londres, New York et Pékin.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:3,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713) 
               ],
               
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });
            
            tourplan.setMap(map);
            //to remove plylines
            //tourplan.setmap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -

Polygones

Les polygones sont utilisés pour mettre en évidence une zone géographique particulière d'un état ou d'un pays. Vous pouvez créer un polygone souhaité en instanciant la classegoogle.maps.Polygon. Lors de l'instanciation, nous devons spécifier les valeurs souhaitées pour les propriétés de Polygon telles que path, strokeColor, strokeOapacity, fillColor, fillOapacity, etc.

Exemple

L'exemple suivant montre comment dessiner un polygone pour mettre en évidence les villes Hyderabad, Nagpur et Aurangabad.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:4,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myTrip = [
               new google.maps.LatLng(17.385044, 78.486671),
               new google.maps.LatLng(19.696888, 75.322451), 
               new google.maps.LatLng(21.056296, 79.057803), 
               new google.maps.LatLng(17.385044, 78.486671)
            ];
            
            var flightPath = new google.maps.Polygon({
               path:myTrip,
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });
            
            flightPath.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -

Rectangles

Nous pouvons utiliser des rectangles pour mettre en évidence la zone géographique d'une région ou d'un état particulier à l'aide d'une boîte rectangulaire. On peut avoir un rectangle sur une carte en instanciant la classegoogle.maps.Rectangle. Lors de l'instanciation, nous devons spécifier les valeurs souhaitées pour les propriétés du rectangle telles que path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, etc.

Exemple

L'exemple suivant montre comment mettre en évidence une zone particulière sur une carte à l'aide d'un rectangle -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,
               
               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,
               
               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )
					
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

Cela vous donne la sortie suivante -

Cercles

Tout comme les rectangles, nous pouvons utiliser des cercles pour mettre en évidence la zone géographique d'une région particulière ou un état à l'aide d'un cercle en instanciant la classe google.maps.Circle. Lors de l'instanciation, nous devons spécifier les valeurs souhaitées pour les propriétés du cercle telles que path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, etc.

Exemple

L'exemple suivant montre comment mettre en évidence la zone autour de New Delhi à l'aide d'un cercle -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
         
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,
            
               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,
            
               fillColor:"#B40404",
               fillOpacity:0.6
            });
				
            myCity.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -