Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Google Maps, mostrar infoWindow como hacerlo

Estas en el tema de Google Maps, mostrar infoWindow como hacerlo en el foro de Frameworks JS en Foros del Web. hola buenas tardes miren tengo una duda en que parte del código podría agregar la información de ya q quiero ahí colocar la dirección que ...
  #1 (permalink)  
Antiguo 20/07/2012, 11:21
Avatar de vero00809_chinita  
Fecha de Ingreso: mayo-2012
Mensajes: 21
Antigüedad: 8 años, 4 meses
Puntos: 0
Google Maps, mostrar infoWindow como hacerlo

hola buenas tardes miren tengo una duda en que parte del código podría agregar la información de ya q quiero ahí colocar la dirección que se esta marcando en el marker
aquí les dejo le código alguien podría ayudarme por favor


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>


<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0px;
padding: 0px;

}

#control {
background: #fff;
padding: 5px;
font-size: 14px;
font-family: Arial;
border: 1px solid #ccc;
box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
display: none;
}
#map_canvas
{
margin-right: 400px;
height: 80%;
}
#directions-panel
{
height : 100%;
float :right ;
width : 390 px;
overflow :auto;
}
@media print
{

#map_cavas
{
height :500 px;
margin : 0;
}
#directions-panel
{
float : none;
width :auto;
}
}
</style>

<script type="text/javascript">

function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canva s"),
myOptions);

setMarkers(map, beaches);
}


var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {

var image = new google.maps.MarkerImage('../images/11.png',

new google.maps.Size(20, 32),

new google.maps.Point(0, 0),

new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('../images/11.png',

new google.maps.Size(37, 32),
new google.maps.Point(0, 0),
new google.maps.Point(0, 32));

var shape = {
coord: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
  #2 (permalink)  
Antiguo 23/07/2012, 17:41
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 10 años, 11 meses
Puntos: 0
Respuesta: Google Maps, mostrar infoWindow como hacerlo

Deberia de ser algo asi
Código:
infowindow.setContent('<strong>Hola Mundo</strong>');
infowindow.open(map, marker);
saludos
  #3 (permalink)  
Antiguo 02/08/2012, 10:59
Avatar de Swab  
Fecha de Ingreso: agosto-2008
Ubicación: Chiloé
Mensajes: 92
Antigüedad: 12 años, 2 meses
Puntos: 5
Respuesta: Google Maps, mostrar infoWindow como hacerlo

Primero debes declarar la variable...

var infoWindow = new google.maps.InfoWindow;

y luego como menciona el amigo, deberías ver los demos de google maps..

https://developers.google.com/maps/d...pt/demogallery


Ahí tienes varios ejemplos con infowindows...

Suerte
  #4 (permalink)  
Antiguo 28/09/2012, 13:46
Avatar de vero00809_chinita  
Fecha de Ingreso: mayo-2012
Mensajes: 21
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Google Maps, mostrar infoWindow como hacerlo

ok muchas garcias por sus respuesta me sirvieron de mucho
ahora ando con intentar que en un click se pueda hacer una circulo y al mismo tiempo colocalr sus grados y sus lat y long en la pantalla pero hasta ahora solo me sale que cuando de el clik lo hacer pero los datos aun no alguien me puede ayudar este es mi codigo

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps</title>
<style type ="text/css">
#map_canvas{
height:600px;
width:1350px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var marker, myCircle, map;
function initialize() {
var myLatlng = new google.maps.LatLng(19.543937,-99.190802);
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canva s'),
mapOptions);

google.maps.event.addListener(map, 'click', function (event) {
addMarker(event.latLng);

});
}

function addMarker(latLng) {
//clear the previous marker and circle.
if (marker != null) {
marker.setMap(null);
myCircle.setMap(null);
}

marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true
});

//circle options.
var circleOptions = {
strokeColor: '#00786c',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00786c',
fillOpacity: 0.35,
map: map,
center: latLng,
radius: 3000
};
//create circle
myCircle = new google.maps.Circle(circleOptions);

//when marker has completed the drag event
//recenter the circle on the marker.
google.maps.event.addListener(marker, 'dragend', function () {
myCircle.setCenter(this.position);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

Etiquetas: google, hacerlo, html, infowindow, js, maps
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:07.