Google Maps - Formas
No capítulo anterior, aprendemos como usar marcadores no Google Maps. Junto com os marcadores, também podemos adicionar várias formas, como círculos, polígonos, retângulos, polilinhas, etc. Este capítulo explica como usar as formas fornecidas pelo Google Maps.
Polilinhas
Polilinhas, fornecidas pelo Google Maps, são úteis para rastrear caminhos diferentes. Você pode adicionar polilinhas a um mapa instanciando a classegoogle.maps.Polyline. Ao instanciar essa classe, temos que especificar os valores necessários das propriedades de uma polilinha, como StrokeColor, StokeOpacity e strokeWeight.
Podemos adicionar uma polilinha a um mapa passando seu objeto para o método setMap(MapObject). Podemos excluir a polilinha passando um valor nulo para o método SetMap ().
Exemplo
O exemplo a seguir mostra uma polilinha destacando o caminho entre as cidades Delhi, Londres, Nova York e Pequim.
<!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>Ele produzirá a seguinte saída -
Polígonos
Os polígonos são usados para destacar uma área geográfica específica de um estado ou país. Você pode criar um polígono desejado instanciando a classegoogle.maps.Polygon. Durante a instanciação, temos que especificar os valores desejados para as propriedades do Polygon, como path, strokeColor, strokeOapacity, fillColor, fillOapacity, etc.
Exemplo
O exemplo a seguir mostra como desenhar um polígono para destacar as cidades 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>Ele produzirá a seguinte saída -
Retângulos
Podemos usar retângulos para destacar a área geográfica de uma determinada região ou estado usando uma caixa retangular. Podemos ter um retângulo em um mapa instanciando a classegoogle.maps.Rectangle. Durante a instanciação, temos que especificar os valores desejados para as propriedades do retângulo, como path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, etc.
Exemplo
O exemplo a seguir mostra como destacar uma área específica em um mapa usando um retâ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>Isso dá a você a seguinte saída -
Círculos
Assim como retângulos, podemos usar Círculos para destacar a área geográfica de uma determinada região ou um estado usando um círculo, instanciando a classe google.maps.Circle. Durante a instanciação, temos que especificar os valores desejados para as propriedades do círculo, como path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, etc.
Exemplo
O exemplo a seguir mostra como destacar a área ao redor de Nova Delhi usando um 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>Ele produzirá a seguinte saída -