¿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.
-------------
<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
0