Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

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

0 votes
154 views
in Technique[技术] by (71.8m points)

javascript - 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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
  1. Create an infowindow: var infowindow = new google.maps.InfoWindow();

  2. 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>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...