Devain
asked on
Google Maps How do I get the mid point of a polyline?
How would I caculate the mid point of the two points on the map point A and point B and place a marker for the mid point?
Here is the code I am working with. A code snippit
it would be greatly appericated as I suck at math and would not know how to incorperate it into what I already have.
The points are being pulled from the database here is the link to the map and points
http://www.eyeglasses123.com/maps/map.php Map
http://www.eyeglasses123.com/maps/genxml.php points xml
Thanks in advance
Here is the code I am working with. A code snippit
it would be greatly appericated as I suck at math and would not know how to incorperate it into what I already have.
The points are being pulled from the database here is the link to the map and points
http://www.eyeglasses123.com/maps/map.php Map
http://www.eyeglasses123.com/maps/genxml.php points xml
Thanks in advance
<script type="text/javascript">
var geocoder;
var map;
var gmarkers = [];
var lines = [];
geocoder = new GClientGeocoder();
//<![CDATA[
var iconBlue = new GIcon();
iconBlue.image = 'http://www.eyeglasses123.com/maps/mm_20_blue.png';
iconBlue.shadow = 'http://www.eyeglasses123.com/maps/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://www.eyeglasses123.com/maps/mm_20_red.png';
iconRed.shadow = 'http://www.eyeglasses123.com/maps/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["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(47.614495, -122.341861), 4);
GDownloadUrl("http://www.eyeglasses123.com/maps/genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
showAddress(markers,0);
}
});
}
}
function addToMap(point,marker_num,name,type,html,color) {
// use a custom icon with letter A - Z
var letter = String.fromCharCode("A".charCodeAt(0) + marker_num);
// alert("addToMap("+marker_num+"="+letter+")");
// GLog.write(letter+j);
var myIcon = new GIcon(G_DEFAULT_ICON, "http://www.google.com/mapfiles/marker" + letter + ".png");
myIcon.printImage = "http://maps.google.com/mapfiles/marker" + letter + "ie.gif"
myIcon.mozPrintImage = "http://maps.google.com/mapfiles/marker" + letter + "ff.gif"
var marker = new GMarker(point, {icon:myIcon});
var infoWindowContent = "<b>"+name+"</b><br>type: "+type+"<br>"+html;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(infoWindowContent);
});
// save the info we need to use later for the side_bar
gmarkers[marker_num] = marker;
if (gmarkers.length >= 2) {
// alert("add polyline - gmarkers.length="+gmarkers.length);
var linepoints = [gmarkers[gmarkers.length-2].getPoint(),
gmarkers[gmarkers.length-1].getPoint()];
// alert(linepoints[0], linepoints[1]);
var polyline = new GPolyline(linepoints,color, 2);
map.addOverlay(polyline);
}
return marker;
}
function showAddress(markers, marker_num) {
var color = markers[marker_num].getAttribute("color");
var name = markers[marker_num].getAttribute("name");
var address = markers[marker_num].getAttribute("address");
var type = markers[marker_num].getAttribute("type");
var html = markers[marker_num].getAttribute("html");
if (!html) { html = "there is no html attribute for this marker";}
geocoder.getLatLng(address,
function(point) {
if (!point) {
alert(address + " not found");
}
else {
map.setCenter(point, 4);
var marker = addToMap(point, marker_num, name, type, html,color);
// alert("gmarkers.length="+gmarkers.length);
map.addOverlay(marker);
}
marker_num += 1;
// note this is a recursive call, may cause problems if lots of markers
// alert("markers.length="+markers.length+" marker_num="+marker_num);
if (markers.length > marker_num) showAddress(markers, marker_num);
});
}
//]]>
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
no problem,
no worries
no worries
ASKER