Google Maps and Javascript

ThePeterPiper · July 2008

I've been working on this for a week, and I can't get anywhere. If anyone could figure this out for me, I'd send you a few dollars:

I want to combine this:


var iconBlue = new GIcon(); 
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon(); 
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["Less than 10 hives"] = iconBlue;
customIcons["More than 10 hives"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.127892,-80.233154), 10);
GDownloadUrl("./php/xml-generator.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {var name = markers[i].getAttribute("name");var type = markers[i].getAttribute("type");var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));var marker = createMarker(point, name, type); map.addOverlay(marker);}}); 
}
}
function createMarker(point, name, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<strong>" + name + "</strong><br />" + type;
GEvent.addListener(marker, 'click', function() {marker.openInfoWindowHtml(html);});
return marker;
}

With this:


  var size = 3958.76; //for miles
  var radius = 3;
  var Clng = (radius/size)*(180/Math.PI)/Math.cos(lat*(Math.PI/180));
  var color = 'red';
  var c_width = '3';
  var Cpoints = [];
  for (var i=0; i < 33; i++) 
      {
      var theta = Math.PI * (i/16);
      Cx = lng + (Clng * Math.cos(theta));
      Cy = lat + ((radius/size)*(180/Math.PI) * Math.sin(theta));
      Cpoints.push(new GPoint(Cx,Cy));
      }
     map.addOverlay(new GPolyline(Cpoints,color,c_width));

Basically, I want a 3 mile radius to appear around every marker.

Can anyone help?

--Pete

miquel · July 2008

you could try this:
enclose the second piece of code into a function but the last line, just like the createMarker one, in this case, returning a GPolyline instead of a GMarker:

function createCircle() {
var size = 3958.76; //for miles
var radius = 3;
var Clng = (radius/size)*(180/Math.PI)/Math.cos(lat*(Math.PI/180)); //dunno about the Math library
var color = 'red';
var c_width = '3';
var Cpoints = [];
for (var i=0; i < 33; i++)
{
var theta = Math.PI * (i/16);
Cx = lng + (Clng * Math.cos(theta));
Cy = lat + ((radius/size)*(180/Math.PI) * Math.sin(theta));
Cpoints.push(new GPoint(Cx,Cy));
return new GPolyline(Cpoints,color,c_width);
}

and call it after adding the marker to the map

var marker = createMarker(point, name, type); map.addOverlay(marker);var circle = createCircle();map.addOverlay(circle);}}

Google Maps and Javascript

Comments