Google Maps: formas
En el capítulo anterior, aprendimos cómo usar marcadores en Google Maps. Junto con los marcadores, también podemos agregar varias formas como círculos, polígonos, rectángulos, polilíneas, etc. Este capítulo explica cómo usar las formas proporcionadas por Google Maps.
Polilíneas
Las polilíneas, proporcionadas por Google Maps, son útiles para rastrear diferentes rutas. Puede agregar polilíneas a un mapa creando una instancia de la clasegoogle.maps.Polyline. Al crear una instancia de esta clase, tenemos que especificar los valores requeridos de las propiedades de una polilínea como StrokeColor, StokeOpacity y strokeWeight.
Podemos agregar una polilínea a un mapa pasando su objeto al método setMap(MapObject). Podemos eliminar la polilínea pasando un valor nulo al método SetMap ().
Ejemplo
El siguiente ejemplo muestra una polilínea que resalta la ruta entre las ciudades Delhi, Londres, Nueva York y Beijing.
<!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>Producirá la siguiente salida:
Polígonos
Los polígonos se utilizan para resaltar un área geográfica particular de un estado o país. Puede crear un polígono deseado creando una instancia de la clasegoogle.maps.Polygon. Al crear una instancia, tenemos que especificar los valores deseados para las propiedades de Polygon, como path, strokeColor, strokeOapacity, fillColor, fillOapacity, etc.
Ejemplo
El siguiente ejemplo muestra cómo dibujar un polígono para resaltar las ciudades Hyderabad, Nagpur y 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>Producirá la siguiente salida:
Rectángulos
Podemos usar rectángulos para resaltar el área geográfica de una región en particular o un estado usando un cuadro rectangular. Podemos tener un rectángulo en un mapa instanciando la clasegoogle.maps.Rectangle. Al crear una instancia, tenemos que especificar los valores deseados para las propiedades del rectángulo, como ruta, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, límites, etc.
Ejemplo
El siguiente ejemplo muestra cómo resaltar un área en particular en un mapa usando un rectángulo:
<!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>Esto le da el siguiente resultado:
Círculos
Al igual que los rectángulos, podemos usar Círculos para resaltar el área geográfica de una región en particular o un estado usando un círculo al instanciar la clase google.maps.Circle. Al crear una instancia, tenemos que especificar los valores deseados para las propiedades del círculo, como path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, etc.
Ejemplo
El siguiente ejemplo muestra cómo resaltar el área alrededor de Nueva Delhi usando un círculo:
<!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>Producirá la siguiente salida: