2013-03-13 3 views
0

Problème: J'essaie d'obtenir une fenêtre d'informations sur le clic du marqueur circulaire dans Google Map.Infowindow pour marqueur circulaire dans Google Map

Mon code:

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title>Google Maps JavaScript API v3 Example: Circle Simple</title> 

<style type="text/css"> 
#map_canvas { 
    height: 100% 
} 
</style> 

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

<script type="text/javascript"> 

var citymap = {}; 
citymap['Yelahanka'] = { 
    center: new google.maps.LatLng(13.133754,77.585784), 
    population: 2842518 
}; 
citymap['Dodaballarpur'] = { 
    center: new google.maps.LatLng(15.133754,77.585784), 
    population: 8143197 
}; 
citymap['Mekricircle'] = { 
    center: new google.maps.LatLng(16.133754,77.585784), 
    population: 3844829 
} 
var cityCircle; 

function initialize() { 
    var mapOptions = { 
    zoom: 7, 
    center: new google.maps.LatLng(13.133754,77.585784), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

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


    var contentString = '<div id="content">'+ 
    '<div id="siteNotice">'+ 
    '</div>'+ 
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
    '<div id="bodyContent">'+ 
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
    'sandstone rock formation in the southern part of the '+ 
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+ 
    'south west of the nearest large town, Alice Springs; 450&#160;km '+ 
    '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+ 
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+ 
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+ 
    'Aboriginal people of the area. It has many springs, waterholes, '+ 
    'rock caves and ancient paintings. Uluru is listed as a World '+ 
    'Heritage Site.</p>'+ 
    '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+ 
    'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+ 
    '(last visited June 22, 2009).</p>'+ 
    '</div>'+ 
    '</div>'; 




    var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 

    for (var city in citymap) { 

    var populationOptions = { 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 6, 
     fillColor: '#669999', 
     fillOpacity: 0.45, 
     map: map, 
     center: citymap[city].center, 
     radius: citymap[city].population/200 
    }; 
    cityCircle = new google.maps.Circle(populationOptions); 
    } 

    google.maps.event.addListener(populationOptions,'click', function() { 
     alert("i am here in this infowindow"); 
     infowindow.open(map,populationOptions); 
    }); 
} 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

</head> 
<body> 
    <div id="map_canvas"></div> 
</body> 
</html> 

Lorsque je clique sur le marqueur circulaire, il doesnot répondre et je n'obtiens une infowindow. Dans le code ci-dessus, j'essaie de créer un cercle dynamique autour de l'endroit avec infowindow montrant quelques détails sur le clic de la région circulaire.

Répondre

0

Veuillez utiliser le code ci-dessous pour créer la fenêtre info. Dans la variable Loc, générez l'emplacement en transmettant la longitude et les paramètres de latitude où l'infowindow doit s'ouvrir.

var Loc = new google.maps.LatLng(latitude,longitude); 
     var INFO_WINDOW_WIDTH = 352;         
     var infowindow = new google.maps.InfoWindow({ 
     position :Loc, 
     maxWidth: INFO_WINDOW_WIDTH 
     }); 
     google.maps.event.addListener(cityCircle,'click', function() { 
               infowindow.close(); 
    infowindow.setContent(contentString); 
               infowindow.setOptions({pixelOffset: new google.maps.Size(0,0)}); 
               infowindow.open(map,this); 
      }); 
+0

Pour obtenir infoWindow affiché dans le GoogleMap pour un géométrie continue lat spécifique, long doit être transmis à infowindow. Bien que j'ai eu mon code bit différemment. – user2164427

0

L'objet que vous transmettez à l'écouteur d'événement semble incorrect. Veuillez utiliser le code suivant pour attacher l'événement onClick sur 'cityCircle'.

google.maps.event.addListener(cityCircle,'click', function() { 
     alert("i am here in this infowindow"); 
     infowindow.open(map,populationOptions); 
    }); 
+0

cela ne marche pas aussi bien – user2164427

+0

est-ce que cela donne ce message d'alerte? –

+0

oui pour le premier cercle, mais infowindow ne vient pas ... – user2164427