Las Polilíneas y los Polígonos son unas herramientas muy útiles para mostrar carreteras, bordes y otro tipo de información.
Área de trabajo
Continuaremos con el área de trabajo que hemos usado a través de los capítulos:
- Capítulo uno: Google Maps API V3 introducción y primeros pasos
- Capítulo dos: Marcadores, posicionar una imagen en el mapa
- Capítulo tres: Consejos prácticos para el InfoWindow en Google Maps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style>
*{ margin: 0; padding: 0; }
html, body, #map{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script>
<script type="text/javascript" src="js/map.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Polilíneas
Consiste de una serie de segmentos conectados por vértices (línea recta creada por dos puntos) que forman un único objeto. Para poder crear una polilínea se requiere usar la clase google.maps.Polyline. Requiere de dos argumentos dentro del objeto google.maps.PolylineOptions, path y map.
path: requiere de varios puntos que indican la latitud y longitud usando la clasegoogle.maps.LatLngmap: el mapa donde se va a mostrar la polilínea, usando la clasegoogle.maps.Map
window.onload = function(){
var options = {
zoom: 9
, center: new google.maps.LatLng(18.2, -66.5)
, mapTypeId: google.maps.MapTypeId.ROADMAP
, draggableCursor: 'default'
, draggingCursor: 'default'
};
var map = new google.maps.Map(document.getElementById('map'), options);
var routes = [
new google.maps.LatLng(17.997671, -66.615356)
, new google.maps.LatLng(18.459418, -66.060646)
];
var polyline = new google.maps.Polyline({
path: routes
, map: map
, strokeColor: '#ff0000'
, strokeWeight: 5
, strokeOpacity: 0.3
, clickable: false
});
};
Nota: Para poder quitar las líneas del mapa, se puede lograr usando el método de setMap y como valor null.
El array que se usó para mostrar la ruta, google maps lo convierte a un MVCArray cuando lo indico en el path del PolylineOptions. MVCArray es un objeto que tiene otros objetos. La diferencia entre un MVCArray a un array regular es que si creas los puntos usando MVCArray, luego puedes añadir otro punto, insertándolo en el MVCArray y el mapa lo reconoce automáticamente, mientras que un array regular tienes que indicarle al mapa el nuevo punto e insertarlo en el path del PolylineOptions.
window.onload = function(){
var options = {
zoom: 9
, center: new google.maps.LatLng(18.2, -66.5)
, mapTypeId: google.maps.MapTypeId.ROADMAP
, draggableCursor: 'default'
, draggingCursor: 'default'
};
var map = new google.maps.Map(document.getElementById('map'), options);
var routes = new google.maps.MVCArray();
var polyline = new google.maps.Polyline({
path: routes
, map: map
, strokeColor: '#ff0000'
, strokeWeight: 3
, strokeOpacity: 0.4
, clickable: false
});
google.maps.event.addListener(map, 'click', function(e){
var path = polyline.getPath();
path.push(e.latLng);
});
};
Nota: Como indicamos en la definición, una polilínea consiste de una serie de segmentos conectados por vertices que esto representa dos puntos que hacen una línea, por lo que la línea aparecerá luego que marquemos el segundo punto.
Para poder crear múltiples polilíneas, se necesita crear diferentes clases de google.maps.Polyline.
/**
* Sugerencias y correcciones por Jonathan (zerokilled)
* http://www.forosdelweb.com/miembros/zerokilled/
*/
window.onload = function(){
var hexVal = "0123456789ABCDEF".split("");
var defaultColor = '#f00';
var options = {
zoom: 9
, center: new google.maps.LatLng(18.2, -66.5)
, mapTypeId: google.maps.MapTypeId.ROADMAP
, draggableCursor: 'default'
, draggingCursor: 'default'
};
var map = new google.maps.Map(document.getElementById('map'), options);
var polyline = new google.maps.Polyline({
path: new google.maps.MVCArray()
, map: map
, strokeColor: defaultColor
, strokeWeight: 3
, strokeOpacity: 0.5
});
function makeColor(){
/**
* Otra forma de crear un color aleatoriamente:
*
* for(var color = Math.floor(Math.random()*0xffffff).toString(16); color.length < 6; color = '0'+color);
* return '#' + color;
*/
return '#' + hexVal.sort(function(){
return (Math.round(Math.random())-0.5);
}).slice(0,6).join('');
}
polyline.currentColor = makeColor();
google.maps.event.addListener(polyline, 'click', function(e){
polyline.setOptions({strokeColor: polyline.currentColor});
polyline = this, this.setOptions({strokeColor: defaultColor});
});
google.maps.event.addListener(map, 'rightclick', function(){
polyline.setOptions({strokeColor: polyline.currentColor});
polyline = new google.maps.Polyline({
path: new google.maps.MVCArray()
, map: map
, strokeColor: defaultColor
, strokeWeight: 3
, strokeOpacity: 0.5
});
polyline.currentColor = makeColor();
google.maps.event.addListener(polyline, 'click', function(){
polyline.setOptions({strokeColor: polyline.currentColor});
polyline = this, this.setOptions({strokeColor: defaultColor});
});
});
google.maps.event.addListener(map, 'click', function(e){
polyline.getPath().push(e.latLng);
});
};
Empezamos pulsando en el mapa para crear una polilínea, luego del segundo punto es que se muestra en el mapa la línea. Para crear una nueva polilínea pulsamos el botón de la derecha del ratón en cualquier parte del mapa, el evento rightclick del addListener se ejecuta y añade una nueva clase google.maps.Polyline. Ahora podemos trazar una nueva polilinea, con diferente color. Si queremos volver a añadir más puntos a alguna polilínea ya mencionada, la podemos seleccionar y seguir trabajando donde se quedó el último punto que hayamos indicado.
Polígonos
Los polígonos son objetos cerrados. Con la clase google.maps.Polygon se crean los polígonos. Requiere de dos argumentos dentro del objeto google.maps.PolygonOptions, path y map.
path: requiere de varios puntos que indican la latitud y longitud usando la clasegoogle.maps.LatLngmap: el mapa donde se va a mostrar el polígono, usando la clasegoogle.maps.Map
Modificamos un poco el código de polilíneas y podemos crear múltiples polígonos de la misma forma como lo hicimos con las polilíneas
/**
* Sugerencias y correcciones por Jonathan (zerokilled)
* http://www.forosdelweb.com/miembros/zerokilled/
*/
window.onload = function(){
var hexVal = "0123456789ABCDEF".split("");
var defaultColor = '#ff0000';
var options = {
zoom: 9
, center: new google.maps.LatLng(18.2, -66.5)
, mapTypeId: google.maps.MapTypeId.ROADMAP
, draggableCursor: 'default'
, draggingCursor: 'default'
};
var map = new google.maps.Map(document.getElementById('map'), options);
var polygon = new google.maps.Polygon({
path: new google.maps.MVCArray()
, map: map
, strokeColor: defaultColor
, strokeWeight: 3
, strokeOpacity: 0.5
, fillColor: defaultColor
, fillOpacity: 0.3
, clickable: false
});
function makeColor(){
/**
* Otra forma de crear un color aleatoriamente:
*
* for(var color = Math.floor(Math.random()*0xffffff).toString(16); color.length < 6; color = '0'+color);
* return '#' + color;
*/
return '#' + hexVal.sort(function(){
return (Math.round(Math.random())-0.5);
}).slice(0,6).join('');
}
polygon.currentColor = makeColor();
google.maps.event.addListener(polygon, 'click', function(e){
polygon.setOptions({
strokeColor: polygon.currentColor
, fillColor: polygon.currentColor
, clickable: true
});
polygon = this, this.setOptions({
strokeColor: defaultColor
, fillColor: defaultColor
, clickable: false
});
});
google.maps.event.addListener(map, 'rightclick', function(){
polygon.setOptions({
strokeColor: polygon.currentColor
, fillColor: polygon.currentColor
, clickable: true
});
polygon = new google.maps.Polygon({
path: new google.maps.MVCArray()
, map: map
, strokeColor: defaultColor
, strokeWeight: 3
, strokeOpacity: 0.5
, fillColor: defaultColor
, fillOpacity: 0.3
, clickable: false
});
polygon.currentColor = makeColor();
google.maps.event.addListener(polygon, 'click', function(){
polygon.setOptions({
strokeColor: polygon.currentColor
, fillColor: polygon.currentColor
, clickable: true
});
polygon = this, this.setOptions({
strokeColor: defaultColor
, fillColor: defaultColor
, clickable: false
});
});
});
google.maps.event.addListener(map, 'click', function(e){
polygon.getPath().push(e.latLng);
});
};
A diferencia de polilíneas, necesitamos indicar que cuando esté seleccionado el polígono no sea “clickeable” y así poder marcar la línea dentro del polígono si fuera necesario.
otro buen capítulo corto y, como de costumbre, fácil de aplicar. ¡mis felicitaciones, abimael!
pd: aunque no lo había solicitado, gracias por el crédito. =)
Buen post, estoy siguiendo todos los capítulos y lo bueno que es muy entendible !!
Salu2
Estimado Abimael, necesito trazar, en google maps, una Polyline y Marker con datos obtenidos de un CSV por medio de PHP (los datos obtenidos son procesados, con php, para ser limpiados y ordenados correctamente). Los mismos los tengo en un Array en PHP, ahora bien,
¿cómo puedo migrar el Array desde php a JavaScript?
(estoy generando el JS del lado del servidor por medio de “echo”;”)
Alguna idea?
Desde ya muchas gracias.
Podrías enviar el array como json, puedes usar json_encode de php y luego leer el resultado con javascript.
Hola!
¿Es posible crear un marcador dentro de una zona (un polígono, por ejemplo)? ¿Y que este marcador solo sea movible (drag) dentro de la misma zona?
Gracias!
[…] Polilíneas y Polígonos en Google Map […]
genial me fue de gran utilidad, se les agradece