admin管理员组

文章数量:1394978

I am trying to add click listener on my map and here is my code for this

update

<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript" src=""></script>
</head>
<style>
    #map-canvas{
 width:500px; 
 height:500px;
}
</style>
<script  type="text/javascript">
    var cityPoints = {
        center: new google.maps.LatLng(41.878113, -87.629798),
        id: 0,
        addr: 'avenue0',
        magnitude: 100000
    };

    var cityCircle;
    var infoWindow = new google.maps.InfoWindow({
        content: "<div>Hello! World</div>",
        maxWidth: 500
    });


  function initialize() {
 var mapOptions = {
     zoom: 4,
     center: new google.maps.LatLng(31.2330555556, 72.3330555556),
     mapTypeId: google.maps.MapTypeId.TERRAIN
 };

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

  var populationOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 1,
      strokeWeight: 1,
      clickable: true,
      fillOpacity: 0,
      map: map,
      center: new google.maps.LatLng(31.231867, 72.33336),
      radius: 200000
  };

  cityCircle = new google.maps.Circle(populationOptions);


    google.maps.event.addListener(cityCircle, 'click', function (ev) {
        infoWindow.setPosition(ev.latLng);
        infoWindow.open(map);
    });
}
initialize();
</script>
<body>
    <div id="map-canvas"></div>
</body>
</html>

But this code is not working for me becasue infor window is not opening when i click on circle.Plz any one tell what exactly i am missing in my code.Plz Help

I am trying to add click listener on my map and here is my code for this

update

<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript" src="http://maps.googleapis./maps/api/js?sensor=false"></script>
</head>
<style>
    #map-canvas{
 width:500px; 
 height:500px;
}
</style>
<script  type="text/javascript">
    var cityPoints = {
        center: new google.maps.LatLng(41.878113, -87.629798),
        id: 0,
        addr: 'avenue0',
        magnitude: 100000
    };

    var cityCircle;
    var infoWindow = new google.maps.InfoWindow({
        content: "<div>Hello! World</div>",
        maxWidth: 500
    });


  function initialize() {
 var mapOptions = {
     zoom: 4,
     center: new google.maps.LatLng(31.2330555556, 72.3330555556),
     mapTypeId: google.maps.MapTypeId.TERRAIN
 };

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

  var populationOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 1,
      strokeWeight: 1,
      clickable: true,
      fillOpacity: 0,
      map: map,
      center: new google.maps.LatLng(31.231867, 72.33336),
      radius: 200000
  };

  cityCircle = new google.maps.Circle(populationOptions);


    google.maps.event.addListener(cityCircle, 'click', function (ev) {
        infoWindow.setPosition(ev.latLng);
        infoWindow.open(map);
    });
}
initialize();
</script>
<body>
    <div id="map-canvas"></div>
</body>
</html>

But this code is not working for me becasue infor window is not opening when i click on circle.Plz any one tell what exactly i am missing in my code.Plz Help

  • javascript
  • google-maps-api-3
Share Improve this question edited May 23, 2013 at 11:21 user2024024 asked May 23, 2013 at 7:41 user2024024user2024024 2091 gold badge4 silver badges12 bronze badges 4
  • 1 infowindow != infoWindow – Dr.Molle Commented May 23, 2013 at 7:53
  • I have done this but still not working – user2024024 Commented May 23, 2013 at 9:25
  • i mean this infoWindow.setPosition(ev.latLng); infoWindow.open(map); – user2024024 Commented May 23, 2013 at 9:28
  • What is your console saying? Is there an error? – Alkis Kalogeris Commented May 23, 2013 at 10:14
Add a ment  | 

1 Answer 1

Reset to default 5

Maybe this google.maps.event.addDomListener(window, 'load', initialize); is what is missing. And here is a working example

http://jsfiddle/9bnCw/6/

I made the radius a little bigger.

UPDATE

Does this work?

UPDATE 3

I've put it all in one file so you can copy and paste it.

<!DOCTYPE html>
<html> 
    <head>
        <style>
 #map-canvas{ 
 height:100%;
 width:100%;           
}
 html, body {
     height: 100%;
 }    
 body {
     margin:0;
     padding:0;
 }           
        </style>
    <script type="text/javascript" src="http://maps.google./maps/api/js?sensor=true"></script>
        <script>
            var cityPoints = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  id: 0,
  addr: 'avenue0',
  magnitude: 100000
};

var cityCircle;
var infoWindow = new google.maps.InfoWindow({
        content: "<div>Hello! World</div>",
        maxWidth: 500
    });

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(31.231867, 72.33336),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

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

           var populationOptions = {
        strokeColor: "#FF0000",
        strokeOpacity: 1,
        strokeWeight: 1,
        clickable: true,
        fillOpacity: 0,
        map: map,
        center: new google.maps.LatLng(31.231867, 72.33336),
        radius: 200000
    };
    cityCircle = new google.maps.Circle(populationOptions);

    google.maps.event.addListener(cityCircle, 'click', function(ev) {
            infoWindow.setPosition(ev.latLng);
            infoWindow.open(map);
        });
}
google.maps.event.addDomListener(window, 'load', initialize);

        </script>  
    </head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

本文标签： javascriptadding click listener on circle is not workingStack Overflow

版权声明：本文标题：javascript - adding click listener on circle is not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744110809a2591283.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。