JavaScript - ¿Se puede pones una imagen en lugar de una polylinea con a api de google maps?

   
Vista:

¿Se puede pones una imagen en lugar de una polylinea con a api de google maps?

Publicado por argo (1 intervención) el 07/02/2012 02:12:45
Hola, llevo ya un tiempo investigando con la api de google maps y me gustaria saber si al crear una polylinea puedo sustituir esa polylinea por una imagen (una flecha). el código es el siguiente:

-------------


<html>
<head>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="tooltip.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">


function initialize() {
var latlng = new google.maps.LatLng(20, 30);
var myOptions = {
zoom: 2,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};

var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);



marker1 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(40.71435280, -74.0059731),
tittle:'movida',
icon:'airport.png',
});








marker2 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(48.8566140, 2.35222190),
tittle:'movida2',
icon:'airport.png',

});




var bounds = new google.maps.LatLngBounds(marker1.getPosition(),
marker2.getPosition());
map.fitBounds(bounds);

google.maps.event.addListener(marker1, 'position_changed', update);
google.maps.event.addListener(marker2, 'position_changed', update);



google.maps.event.addListener(marker1,'mouseover',function(){
tooltip.show(this.descript);
});
google.maps.event.addListener(marker1,'mouseout',function(){
tooltip.hide();
});
google.maps.event.addListener(marker1,'click',function(){
window.open(this.link);
});

var polyOptions = {
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
map: map,
gIcon:'airport.png',
};
poly = new google.maps.Polyline(polyOptions);

var geodesicOptions = {
strokeColor: '#CC0099',
strokeOpacity: 1.0,
strokeWeight: 3,
geodesic: true,
map: map,

};
geodesicPoly = new google.maps.Polyline(geodesicOptions);

update();
}

function update() {
var path = [marker1.getPosition(), marker2.getPosition()];
poly.setPath(path);
geodesicPoly.setPath(path);


}

google.maps.event.addDomListener(window, 'load', initialize);




</script>



</head>
<body >

<div id="map_canvas" style="width:800px; height:400px; border:7px solid #090; border-radius:10px;"></div>

</body>
</html>

---------------

Con este codigo pongo 2 marcas y las uno mediante 2 polylineas, una curva y otra recta. Lo que quiero es sustituir la polilynea curva por una imagen .png o gif que sea una flecha y se adapte a la longitud de la polylinea.

Muchas gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder