Google Maps, mostrar infoWindow como hacerlo

vero00809_chinita · #1 (**permalink**) 20/07/2012, 11:21

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>

Miguel_Mendez · #2 (**permalink**) 23/07/2012, 17:41

Deberia de ser algo asi

Código:

infowindow.setContent('<strong>Hola Mundo</strong>');
infowindow.open(map, marker);

saludos

Swab · #3 (**permalink**) 02/08/2012, 10:59

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

vero00809_chinita · #4 (**permalink**) 28/09/2012, 13:46

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>