how to plot circles in subgurim google maps?

Question

i work with subgurim google maps v4 .i need to plot several circles with different colors based on (latitude,lnogitude,radius) .how can i perform it?

during search i found multiple codes to drow the circle but not using subgurim google maps.can one help to convert this code .

var Circle = new google.maps.Circle({ center: birrfeld, radius: 2000, strokeColor: color, strokeOpacity: 1, strokeWeight: 2, fillColor: color, fillOpacity: 0.4 });
                                Circle.setMap(map);

I have been looking into doing data representations as well, it is not that easy to do in a one liner. So for those who ask "what have you done' of the poster, its a lot to filter out all the data so far. [look here for google spec](https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions) — alexmac, Mar 15 '14 at 13:40

alexmac · Accepted Answer · 2014-03-15T14:47:18.293

0

Here is my code, I use a data file that has just long and lat in it, as json.

var latlng;
var marker;
function initialize () {
var mapOptions = {  
      zoom: 2, 
      center: new google.maps.LatLng(2.8,2.8), 
      mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById("mapCanvas"),mapOptions  );
console.log("alex");

$.getJSON("data/canada.json", function(data) {

  //console.log(latlngArray);
  var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.2,
      strokeWeight: 6,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: latlng,
      radius: 20000,
      } 

  for (var i = 0; i < data.length; i++) {
    populationOptions.center = new google.maps.LatLng(data[i].Latitude,data[i].Longitude);
    cityCircle = new google.maps.Circle(populationOptions);  

  }
});  
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&?key=AIzaSyB_h_TZ3jVQstD6ieduDF482_kRIyF4y1I&sensor=false&' 
  + 'callback=initialize';
  document.body.appendChild(script);
  console.log("aaa");
}
window.onload = loadScript;

The html

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
   html {height:100%},
   body {height:100%;margin:0;padding:0}

</style>
 <script src="js/jquery1.9.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>


<script src="js/AlexMap.js"></script>
</head>

<body >
  <div id="heatmapArea style="width:1100px; height:900px"></div>

</body>

The data I use draws a bunch of circles of all weather stations in Canada both official and part of the "observer program"

Positions of Weather Stations in Canada

edited Mar 15 '14 at 14:47

answered Mar 15 '14 at 13:51

alexmac

239
2
9

I am still working on this, I started yesterday so in another week once I am done I will create a git hub. – alexmac Mar 15 '14 at 13:52
thank you very much..but you are using does this is ready or i need to programming it ? – Enas Ali Mar 15 '14 at 13:59
No, I am planning on doing some Jquery UI slides, to move through a year of data and do heat maps from the weather station data. If your map is grey and your loading data as Json , then look to the call as there is no error if the json is malformed. Also be sure to set a side for your div , a blank size results in no map as well. Keep in mind I just started yesterday in learning the API and the code is "rough" but should save you heart ache that I went through. – alexmac Mar 15 '14 at 14:02
In this I am plotting 5374 points, I tried plotting the Unitied States 49,225 points but crashed all types of browsers. I am looking at other api types in google maps, to see if find better memory management or less intense data structures. – alexmac Mar 15 '14 at 14:06
its nice work ..but this mean i cant use the subgurim google maps to do like that ...thank you alexmac. – Enas Ali Mar 15 '14 at 14:08
Lastly, just normal markers is not so intense and I can plot 91266 points but thats very pretty or useful from a visual represent ion of data. The API I found even with Canada points it was a bit slow, your own results may vary :) good luck, glad I could help – alexmac Mar 15 '14 at 14:09
Yes, I have not looked into subgurim at all, sorry. I'd have go google the name just to know what it is. This at least gives you a head start and lets you see if your data is something you wish to put further work into your project. – alexmac Mar 15 '14 at 14:10
The Radius is in metres by the way. – alexmac Mar 15 '14 at 14:11
alexmac. your have a lot data ..why you are not use static google maps to reterive the work as image .. – Enas Ali Mar 15 '14 at 14:17
it is an experiment in my spare time, I am looking at various ways to display the data. This is the base points for the data, then those weather stations I will use and take daily min / max for each data for the last 200 years (if data) and do a time lapse of data - changing the colour of the plot based on upward or downward data. 200 x 366 x 2 x 91266 arrays (arrays are the geo data as well) – alexmac Mar 15 '14 at 14:23
I removed latlngArray as it was an experiment to see if I could make array of points from the JSON data - I left it in by mistake – alexmac Mar 15 '14 at 14:48
@user3423232 I found a very good heat map project on github this is the one I was looking at yesterday as well, the demo directory has one very good examples - [heatmaps](http://www.patrick-wied.at/static/heatmapjs/) – alexmac Mar 15 '14 at 19:36
alexmac, this website plot data according to (lat,lng,count).its similar to google heat map ,here it frequent the point according to its count and generate random color..yesterday i test google heatmaps and i found it increase the radius in each frequent in the point..and this work like it . – Enas Ali Mar 16 '14 at 05:38

how to plot circles in subgurim google maps?

1 Answers1