Google Maps - Forme
Nel capitolo precedente abbiamo appreso come utilizzare i marcatori in Google Maps. Insieme ai marker, possiamo anche aggiungere varie forme come cerchi, poligoni, rettangoli, polilinee, ecc. Questo capitolo spiega come utilizzare le forme fornite da Google Maps.
Polilinee
Le polilinee, fornite da Google Maps, sono utili per tracciare diversi percorsi. È possibile aggiungere polilinee a una mappa istanziando la classegoogle.maps.Polyline. Durante la creazione di un'istanza di questa classe, dobbiamo specificare i valori richiesti delle proprietà di una polilinea come StrokeColor, StokeOpacity e strokeWeight.
Possiamo aggiungere una polilinea a una mappa passando il suo oggetto al metodo setMap(MapObject). Possiamo eliminare la polilinea passando un valore nullo al metodo SetMap ().
Esempio
L'esempio seguente mostra una polilinea che evidenzia il percorso tra le città Delhi, Londra, New York e Pechino.
<!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>Produrrà il seguente output:
Poligoni
I poligoni vengono utilizzati per evidenziare una particolare area geografica di uno stato o di un paese. È possibile creare un poligono desiderato istanziando la classegoogle.maps.Polygon. Durante la creazione dell'istanza, dobbiamo specificare i valori desiderati per le proprietà di Polygon come path, strokeColor, strokeOapacity, fillColor, fillOapacity, ecc.
Esempio
L'esempio seguente mostra come disegnare un poligono per evidenziare le città Hyderabad, Nagpur e 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>Produrrà il seguente output:
Rettangoli
Possiamo utilizzare i rettangoli per evidenziare l'area geografica di una particolare regione o stato utilizzando una casella rettangolare. Possiamo avere un rettangolo su una mappa istanziando la classegoogle.maps.Rectangle. Durante la creazione dell'istanza, dobbiamo specificare i valori desiderati per le proprietà del rettangolo come path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, ecc.
Esempio
L'esempio seguente mostra come evidenziare una particolare area su una mappa utilizzando un rettangolo:
<!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>Questo ti dà il seguente output:
Cerchi
Proprio come i rettangoli, possiamo usare i cerchi per evidenziare l'area geografica di una particolare regione o stato usando un cerchio istanziando la classe google.maps.Circle. Durante la creazione dell'istanza, dobbiamo specificare i valori desiderati per le proprietà del cerchio come path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, ecc.
Esempio
L'esempio seguente mostra come evidenziare l'area intorno a Nuova Delhi utilizzando un cerchio:
<!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>Produrrà il seguente output: