Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Google Maps How do I get the mid point of a polyline?

Posted on 2008-06-19
3
Medium Priority
?
609 Views
Last Modified: 2008-06-19
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

0
Comment
Question by:Devain
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 3

Accepted Solution

by:
McCoin earned 2000 total points
ID: 21822965
I've never used google maps before, but I did a little research and found this link
http://groups.google.dm/group/Google-Maps-API/browse_thread/thread/a5545239760d7db9

It has some replies and some code examples, I hope this helps
0
 

Author Comment

by:Devain
ID: 21823073
lol thanks forgot I posted this
0
 
LVL 3

Expert Comment

by:McCoin
ID: 21823199
no problem,
no worries
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question