Link to home
Start Free TrialLog in
Avatar of Devain
DevainFlag for United States of America

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


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

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of McCoin
McCoin

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Devain

ASKER

lol thanks forgot I posted this
Avatar of McCoin
McCoin

no problem,
no worries