JavaScript - Displaying Dynamic Graphs On Google Maps

I'm trying to make something a lot like a store locator where a user types in their address of origin and submits, then the script compares the driving distances between their entered address and the 4 destination locations that I will store in an array once the page loads.

It's kind of hard to describe. I have a form working to do the distance and driving directions once I know which destination will be chosen. This is what I have so far:
http://rowsdower.freehostia.com/map_test.php

That seems to be working just fine. The problem is that I just can't get anything working that will compare the distance between the origin and each of the options before choosing and displaying directions to the nearest destination. My ultimate goal is to update the list of <options> with PHP and maybe MySQL - though I really don't need this to be large-scale. Then, after the user inputs a starting address if they choose a specific location from the dropdown it will give those directions, otherwise (if the "choose closest location" option is still active) then I will run a comparison of driving distances for each option's address value and store them to an array. Once all locations are read and tested for driving distance I want to take the closest location set that option as selected, and then run the call for driving directions as usual.

I know how to pull the option values, how to set and unset the "selected" attribute, and how to check to see if distances need to be compared. I can figure out how to do just about everything I need EXCEPT for getting the google maps API to play along. I've tried so many dead-end ideas that I have just reset my map code to square one. Any ideas for a script piece to run that will return only the driving distance for a list of locations?

The onclick event listener would be something like this
Code:

Array.prototype.findIndex = function(value){
	var ctr = "";
	for (var i=0; i < this.length; i++) {
		// use === to check for Matches. ie., identical (===), ;
		if (this[i] == value) {
			return i;
		}
	}
	return ctr;
};





// ===== request the directions =====
function getDirections() {
	document.getElementById("directions").style.display="block";  //displays the directions container 
	var saddr = document.getElementById("search1").value;  //the user's origin 
	var daddr = document.getElementById("search2").value;  //the selected destination 
	if (daddr=="Closest Location") {
		var distances = [0];
		for (i=1;i<document.getElementById("search2").options.length;i++) {
			 //setting i=1 so I skip the "closest Location" option... 
			if (document.getElementById("search2").options[i].selected) {
				document.getElementById("search2").options[i].removeAttribute("selected");  // de-select each option as we go just in case... 
			}
			var destination = document.getElementById("search2").options[i].value;  // pulling up the stored address 

			 //run driving directions comparison here then set "daddr" to the address whose driving distance is least 
 			distances[i]=getDrivingDistance(saddr,destination);  /*	<----- I just made this up, I don't really know
										how to get this done but I want it to be as
										simple as this somehow...*/  
		}
		daddr = distances.findIndex(distances.min());  // Finds index of the lowest driving distance 
		document.getElementById("search2").options[daddr].setAttribute("selected","selected");  // marks closest location as selected 
		daddr = document.getElementById("search2").options[daddr];  // sets destination address to same index as least distance index 
	}
	 // at this point I have either the user-defined destination or else the closest destination, so I find the directions... 
	var locale = getLocale();
	var dirOpts = {
		locale: locale,
		getPolyline: true
	};
	if (document.getElementById("walkingDirections").checked) {dirOpts.travelMode = G_TRAVEL_MODE_WALKING;}
	if (document.getElementById("avoidHighways").checked) {dirOpts.avoidHighways = true;}
	if (mapPreserveViewport) {
		dirOpts.preserveViewport = true
	}
	gdir.load("from: "+saddr+" to: "+daddr, dirOpts);
}

I'm going cross-eyed trying to get this working. Does anyone have any ideas for a code blurb to tie this all together? I think everything else should work once I get through the distance iterations but I'm useless with the google maps API...

Hi, I have been trying to create a google graph from an input combobox but I'm having trouble passing the variable to the query on the spreadsheeet.

The graph is able to query the spreadsheet when I don't use a varible, and my combobox is recieveing the variable but I'm having trouble connecting the two. The code I'm trying to use is below and I also attached a text file, so any help would be so fantastic!

This is the code I have for it:



Code:

<!-- try 1 Rivas, try 2 San jose
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->



  
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['linechart']});
    </script><script src="http://www.google.com/uds/?file=visualization&amp;v=1&amp;packages=linechart" type="text/javascript"></script><script src="http://www.google.com/uds/api/visualization/1.0/3dc85ad905db9d2ce85ec8d8389c32d5/default,browserchart,linechart.I.js" type="text/javascript"></script>
    <script type="text/javascript">

 function storeValue(obj){
                if(obj.selectedIndex == 0){return;}
                var MonthChosen = obj.value;
                alert('You chose:  '+ MonthChosen);
            }
        window.onload = function(){
            document.getElementsByName('combo1')[0].onchange=function(){storeValue(this);}
        }


    var visualization;

    function drawVisualization() {
      // To see the data that this visualization uses, browse to
      // http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ  
      var query = new google.visualization.Query(
          'https://spreadsheets.google.com/ccc?key=0Ais9xMj35wQmdDBTMUxHRS1CRHVkcGI4dnZ0c2xLZXc&hl=en');
      
      // Apply query language.
      query.setQuery('SELECT H WHERE E ="MonthChosen" ORDER BY F');
      
      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }
    
    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
    
      var data = response.getDataTable();
      visualization = new google.visualization.LineChart(document.getElementById('visualization'));
      visualization.draw(data, {legend: 'bottom'});
    }

    google.setOnLoadCallback(drawVisualization);
    </script>
  








<h2> What month would you like to see the 10 year comparative data from?</h2>
    <form>
        <table>
            <tbody><tr>
                <td>Combo Box</td>
                <td>
                    <select id="combo1" name="combo1" onchange="input1.value = combo1.value">
  <option value="’1’">January</option>
  <option value="’2’">February</option>
  <option value="’3’">March</option>
  <option value="’4’">April</option>
<option value="’5’">May </option>
<option value="’6’">June </option>
<option value="’7’"> July</option>
<option value="’8’">August </option>
<option value="’9’">September </option>
<option value="’10’">October </option>
<option value="’11’">November </option>
<option value="’12’">December </option>

                    </select>
                </td>
            </tr>
            <tr>
                <td>Input Box</td>
                          </tr>
        </tbody></table>
    </form>















  
    <div id="visualization" style="height: 400px; width: 400px;"></div>

Hi,

I'm not sure where I have translated this incorrectly. I have one google map embedded on my page which works fine. But I wanted to add a second one. I thought the easiest way to do this would be to have a second page which is called later on with all the details on it for the second map. However although I think (this I presume is where I went wrong) I have replicated the instructions correctly the place holder for the second map just remains blank.

This is the code for my called page with the instructions for the second map:
PHP Code:
<?php
echo $_POST['Map'] . '<br />';
?>

<div id="placemap_canvas"></div>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css"> 
    html {height:250px}
    body {height:250px}
    #placemap_canvas {width:100%; height:150px;}
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
        var latlng = new google.maps.LatLng (
<?php

include("dbconnect.php");

            $result = mysql_query("SELECT * FROM regions
            WHERE RegionPId='{$_POST['Map']}'");

            while($row = mysql_fetch_array($result)){
                echo $row['maplink'];
                }

        mysql_close($con);
?>
);
        var myOptions = {
            zoom: 4,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("placemap_canvas"),
            myOptions);

    }

</script>

And this is the script of the main page, just in case I would be better off keeping them both in one place.
Code:

<head>

<script type="text/javascript">
function loadSubPlace(File,ID,Msg,Eile,EID,Esg){
loadXMLDoc1(File,ID,Msg);
	 var mimer = setTimeout(function(){loadXMLDoc1(Eile,EID,Esg)},5000);
}
</script>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css"> 
	html {height:250px}
	body {height:250px}
	#map_canvas {width:30%; height:250px;}
</style>

<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
function initialize() {

		var latlng = new google.maps.LatLng (
<?php

include("dbconnect.php");

			$result = mysql_query("SELECT * FROM countries 
			WHERE Country='{$_SESSION['Country']}'");

			while($row = mysql_fetch_array($result)){
				echo $row['Map'];
				}

		mysql_close($con);
?>);
		var myOptions = {
			zoom: 4,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"),
			myOptions);
	}

</script>
</head>
<body onload="initialize()">

		<div class="countryright" id="map_canvas">

include("dbconnect.php");

$snowball=explode(';',$_POST['syringa']);
$turnsol=$snowball[1];
$violet =$snowball[2];
$wakerobin=$snowball[3];

global $turnsol;
global $violet;
global $wakerobin;

	echo '<center><b><big>' . $wakerobin. '</big></b></center><br /><br />';

	$result=mysql_query("SELECT * FROM regions
	WHERE country='{$turnsol}' AND region='{$violet}' AND place='{$wakerobin}' AND sub !=''
	ORDER BY sub ASC");

			while($row = mysql_fetch_array($result)){
				$wheat="{$row['RegionPId']};{$turnsol};{$violet};{$wakerobin};{$row['sub']}";
				$tigerlilly=$row['RegionPId'];
				echo '<input type="button" class="button3" name="place" id="place" value="' . $row['sub'] . '" onclick="loadSubPlace(\'getPlace.php\',\'txtHintPlaceSub\',\'hepatica=' . urlencode($wheat) . '\',\'getPlaceMap.php\',\'placemapcanvas\',\'Map=' . urlencode($tigerlilly) . '\');" />';
				}
		echo '<input type="button" class="button3" name="addplace" id="addplace" value="Add Place" onclick="loadXMLDoc1(\'getAddPlaceSub.php\',\'txtHintPlaceSub\', encodeURI(\'addsubplace=' . $_POST['syringa'] . '\'));" />';

echo '<br /><br /><div id="txtHintPlaceSub"></div><br /><br />';

mysql_close($con);

?>

I've cut out the script that doesn't relate to this so I hope I haven't missed anything important.

I'm completely at a loss how to embed a map with the new google maps api setup. I found a snippet of code that I dropped in with some small database variables pulled in and was done. Then an error came that the API was no good. So I went in and set up an anaccount, got an api and now I just simply have no clue what their instructions are saying I need to do. Gah!

Here's what I originally had:
I now have a Client ID, client secret and stuff. But no clue how to set up this url, etc.
Code:

</script> 
<script src="//maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI"
            type="text/javascript"></script>
            
<script type="text/javascript">
    
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(<?php echo $c_row['location_longitude']; ?>,<?php echo $c_row['location_latitude']; ?>), 13);
 // Add the latitude/longitude marker to the map
	var point = new GLatLng(<?php echo $c_row['location_longitude']; ?>,<?php echo $c_row['location_latitude']; ?>);
	map.addOverlay(new GMarker(point));
	map.setUIToDefault();
      }
    }

    </script>

<b>Map:<br><br><div id="map_canvas" style="width: 500px; height: 300px; z-index:4000;border-width:medium;border-color:#030;"></div></b>

Hey

I'm quite new at javascript and am currently in the process of creating a site that embeds google maps using an xml document.

What I'm trying to do is categories the markers on my map.

I am trying to make it so there are check boxes at the bottom and when i check the boxes, i.e. theatres, the markers will appear for the theatres and disappear when unchecked.

Using some example code i have modified, i have so far got the maps to pickup the markers from the xml with the check boxes but the markers are all just on the page and the check boxes dont do anything and I am stuck as to of why.

here's my code:

Code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Google Maps</title>
    <script src="mykey"></script>
  </head>
 <body style="margin:0px; padding:0px;" onload="initialize()"> 
  
    <table border=1>
      <tr>
        <td>
           <div id="map" style="width: 550px; height: 450px"></div>
        </td>
        <td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;"> 
           <div id="side_bar"></div>

        </td>
      </tr>
    </table>
    <form action="#">
      Theatres: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" /> &nbsp;&nbsp;
      Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" /> &nbsp;&nbsp;
      Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br />

    </form>  

<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
  </body>


    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {

      var side_bar_html = "";
    
     
      var gmarkers = [];
	  var map = null;

      
      function createMarker(point,name,html,category) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
      
		marker.mycategory = category;                                 
        marker.myname = name;
        gmarkers.push(marker);
        
        side_bar_html += '<a href="javascript<b></b>:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
        return marker;
      }

     
 function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(true);
          }
        }
     
        document.getElementById(category+"box").checked = true;
      }

   ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(false);
          }
        }
    
        document.getElementById(category+"box").checked = false;
    that we just hid
        infowindow.close();
      }


      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
    
        makeSidebar();
      }

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }

     
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 53.8363,-3.03771), 11);
	  
      GDownloadUrl("categories.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var address = markers[i].getAttribute("address");
          var name = markers[i].getAttribute("name");
          var html = "<b>"+name+"<\/b><p>"+address;
          var category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,html,category);
          map.addOverlay(marker);
        }

        document.getElementById("side_bar").innerHTML = side_bar_html;
	
        show("theatre");
        hide("golf");
        hide("info");
      });
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }


    </script>
  </body>

</html>

If anybody help with this and tell me where I am going wrong, it would be much appreciated.


thanks