Google Maps API - Get info window to open when clicking a circle?

问题

I'm trying desparately to get a google map with circles which can be clicked to open an infowindow. It really doesn't seem like a complicated ask but searching online it does't seem to be possible, but I'm wondering if those posts are old and it's now possible.

What I'm trying to do I'm trying to have a google map (HTML code which I can 'host' on SharePoint) with circles in different locations (This bit is fine so far) where I can click the circle to open an info window with a list of people at that location.

What I've done so far I've been looking at the google maps javascript API pages and successfully made a map with circles using this example https://developers.google.com/maps/documentation/javascript/examples/circle-simple

I've also tried putting a marker at the centre of the map with an infowindow which is less than ideal but still acceptable, however this didn't work. I literaly just cut the part of the javascript which does a marker and the page wouldn't load.

My Background Unfortunately I have no idea about Javascript. I know a little about HTML but I'm certainly not from a technical background, I just want a map which looks nice and works. I could literally be one character from making it work but I've no clue what javascript means. .

<!DOCTYPE html>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Newsletter Map</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
// This example creates circles on the map, representing
// populations in North America.

// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['Mumbai'] = {
  center: new google.maps.LatLng(19.075787,72.8774882),
  population: 14000
};
citymap['Cardiff'] = {
  center: new google.maps.LatLng(51.4887969,-3.1826222),
  population: 1000
};
citymap['Pune'] = {
  center: new google.maps.LatLng(18.5212252,73.8556156),
  population: 14000
};
citymap['Beeston'] = {
  center: new google.maps.LatLng(52.9547839,-1.1581733),
  population: 3000
};
citymap['Birmingham'] = {
  center: new google.maps.LatLng(52.4677785,-1.7230922),
  population: 4000
};
citymap['Bristol'] = {
  center: new google.maps.LatLng(51.5434779,-2.573748),
  population: 2000
};
citymap['Brussels'] = {
  center: new google.maps.LatLng(50.8891268,4.4592719),
  population: 1000
};
citymap['Crewe'] = {
  center: new google.maps.LatLng(53.0888925,-2.4357559),
  population: 2000
};
citymap['Dundee'] = {
  center: new google.maps.LatLng(56.4563534,-2.9752489),
  population: 1000
};
citymap['Durham'] = {
  center: new google.maps.LatLng(54.5468172,-1.5703596),
  population: 1000
};
citymap['Glasgow'] = {
  center: new google.maps.LatLng(55.8601948,-4.256542),
  population: 2000
};
citymap['Liverpool'] = {
  center: new google.maps.LatLng(53.4114691,-2.9954281),
  population: 5000
};
citymap['Livingston'] = {
  center: new google.maps.LatLng(55.8889266,-3.5575676),
  population: 12000
};
citymap['Moray'] = {
  center: new google.maps.LatLng(57.6153854,-3.5727702),
  population: 1000
};
citymap['Newcastle'] = {
  center: new google.maps.LatLng(55.0114826,-1.6218245),
  population: 1000
};
citymap['Runcorn'] = {
  center: new google.maps.LatLng(53.3416269,-2.7312661),
  population: 6000
};
citymap['Winnersh'] = {
  center: new google.maps.LatLng(51.43674,-0.89131),
  population: 5000
};
citymap['Wolverhampton'] = {
  center: new google.maps.LatLng(52.6375302,-2.1184067),
  population: 1000
};
citymap['Plymouth'] = {
  center: new google.maps.LatLng(50.3752499,-4.1425974),
  population: 1000
};
citymap['Swinton Manch'] = {
  center: new google.maps.LatLng(53.5108841,-2.3468262),
  population: 1000
};
citymap['Cleveleys'] = {
  center: new google.maps.LatLng(53.8758639,-3.0423774),
  population: 1000
};
citymap['Peterborough'] = {
  center: new google.maps.LatLng(52.5694182,-0.2415024),
  population: 1000
};
citymap['Saffron Walden'] = {
  center: new google.maps.LatLng(52.0224437,0.2393275),
  population: 1000
};
citymap['Gloucester'] = {
  center: new google.maps.LatLng(51.864033,-2.2382369),
  population: 1000
};
citymap['LTQ'] = {
  center: new google.maps.LatLng(51.5250213,-0.141524),
  population: 18000
};
citymap['Enfield'] = {
  center: new google.maps.LatLng(51.651765,-0.0835785),
  population: 1000
};

var cityCircle;

function initialize() {
  // Create the map.
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(53.3789721,-1.4693043),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

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

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);
  }
}


 

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:_dlc_DocId msdt:dt="string">FQNCM6NFZFN7-2543-7</mso:_dlc_DocId>
<mso:_dlc_DocIdItemGuid msdt:dt="string">a9ec8002-9354-4aef-9bbe-aac4a1d8f794</mso:_dlc_DocIdItemGuid>
<mso:_dlc_DocIdUrl msdt:dt="string">https://sp.myatos.net/ms/uki/bs/bo/_layouts/DocIdRedir.aspx?ID=FQNCM6NFZFN7-2543-7, FQNCM6NFZFN7-2543-7</mso:_dlc_DocIdUrl>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

回答1:

Create an infowindow: var infowindow = new google.maps.InfoWindow();

set its content, position and open it on a click:

google.maps.event.addListener(cityCircle, 'click', function(e) {
  infowindow.setContent(this.getCenter().toUrlValue(6) + "<br>" + this.getRadius());
  infowindow.setPosition(this.getCenter());
  infowindow.open(map);
});

working code snippet:

// This example creates circles on the map, representing
// populations in North America.

// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['Mumbai'] = {
  center: new google.maps.LatLng(19.075787, 72.8774882),
  population: 14000
};
citymap['Cardiff'] = {
  center: new google.maps.LatLng(51.4887969, -3.1826222),
  population: 1000
};
citymap['Pune'] = {
  center: new google.maps.LatLng(18.5212252, 73.8556156),
  population: 14000
};
citymap['Beeston'] = {
  center: new google.maps.LatLng(52.9547839, -1.1581733),
  population: 3000
};
citymap['Birmingham'] = {
  center: new google.maps.LatLng(52.4677785, -1.7230922),
  population: 4000
};
citymap['Bristol'] = {
  center: new google.maps.LatLng(51.5434779, -2.573748),
  population: 2000
};
citymap['Brussels'] = {
  center: new google.maps.LatLng(50.8891268, 4.4592719),
  population: 1000
};
citymap['Crewe'] = {
  center: new google.maps.LatLng(53.0888925, -2.4357559),
  population: 2000
};
citymap['Dundee'] = {
  center: new google.maps.LatLng(56.4563534, -2.9752489),
  population: 1000
};
citymap['Durham'] = {
  center: new google.maps.LatLng(54.5468172, -1.5703596),
  population: 1000
};
citymap['Glasgow'] = {
  center: new google.maps.LatLng(55.8601948, -4.256542),
  population: 2000
};
citymap['Liverpool'] = {
  center: new google.maps.LatLng(53.4114691, -2.9954281),
  population: 5000
};
citymap['Livingston'] = {
  center: new google.maps.LatLng(55.8889266, -3.5575676),
  population: 12000
};
citymap['Moray'] = {
  center: new google.maps.LatLng(57.6153854, -3.5727702),
  population: 1000
};
citymap['Newcastle'] = {
  center: new google.maps.LatLng(55.0114826, -1.6218245),
  population: 1000
};
citymap['Runcorn'] = {
  center: new google.maps.LatLng(53.3416269, -2.7312661),
  population: 6000
};
citymap['Winnersh'] = {
  center: new google.maps.LatLng(51.43674, -0.89131),
  population: 5000
};
citymap['Wolverhampton'] = {
  center: new google.maps.LatLng(52.6375302, -2.1184067),
  population: 1000
};
citymap['Plymouth'] = {
  center: new google.maps.LatLng(50.3752499, -4.1425974),
  population: 1000
};
citymap['Swinton Manch'] = {
  center: new google.maps.LatLng(53.5108841, -2.3468262),
  population: 1000
};
citymap['Cleveleys'] = {
  center: new google.maps.LatLng(53.8758639, -3.0423774),
  population: 1000
};
citymap['Peterborough'] = {
  center: new google.maps.LatLng(52.5694182, -0.2415024),
  population: 1000
};
citymap['Saffron Walden'] = {
  center: new google.maps.LatLng(52.0224437, 0.2393275),
  population: 1000
};
citymap['Gloucester'] = {
  center: new google.maps.LatLng(51.864033, -2.2382369),
  population: 1000
};
citymap['LTQ'] = {
  center: new google.maps.LatLng(51.5250213, -0.141524),
  population: 18000
};
citymap['Enfield'] = {
  center: new google.maps.LatLng(51.651765, -0.0835785),
  population: 1000
};

var cityCircle;
var infowindow = new google.maps.InfoWindow();

function initialize() {
  // Create the map.
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(53.3789721, -1.4693043),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  
  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);
    google.maps.event.addListener(cityCircle, 'click', function(e) {
      infowindow.setContent(this.getCenter().toUrlValue(6) + "<br>" + this.getRadius());
      infowindow.setPosition(this.getCenter());
      infowindow.open(map);
    });
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

来源：https://stackoverflow.com/questions/29099608/google-maps-api-get-info-window-to-open-when-clicking-a-circle

标签

javascript

google-maps-api-3

geometry

infowindow