Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Google Maps and Javascript

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

Comments

  • 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 mapvar marker = createMarker(point, name, type); map.addOverlay(marker);var circle = createCircle();map.addOverlay(circle);}}
This discussion has been closed.