|
JavaScript - Need Help With Google Map And Directions Api
Hi,
I have a table with FROM and TO columns and a column with MAP/DIRECTIONS link. When a user clicks on the link, it should display Map and Directions on the iframe on the same page. How can I achieve this using Google map and directions API? Thanks Similar TutorialsHello, I am trying to create multiple google maps with multiple directions that load on one page. I have tried duplicating the var and function names but I haven't been able to get it to work. Does anyone have any ideas? Any help or suggestions would be greatly appreciated! -Topianno Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Advanced Directions</title>
<script src=" http://maps.google.com/?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<style type="text/css">
body {
font-family: Verdana, Arial, sans serif;
font-size: 11px;
margin: 2px;
}
table.directions th {
background-color:#EEEEEE;
}
img {
color: #000000;
}
</style>
<script type="text/javascript">
var map;
var map2;
var gdir;
var gdir2;
var geocoder = null;
var geocoder2 = null;
var addressMarker;
var addressMarker2;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
gdir = new GDirections(map, document.getElementById("directions"));
GEvent.addListener(gdir, "load", onGDirectionsLoad);
GEvent.addListener(gdir, "error", handleErrors);
setDirections("San Francisco", "Mountain View", "en_US");
setDirections2("San Francisco", "Mountain View", "en_US");
}
}
function setDirections(fromAddress, toAddress, locale) {
gdir.load("from: " + fromAddress + " to: " + toAddress,
{ "locale": locale });
}
function handleErrors(){
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
// else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) <--- Doc bug... this is either not defined, or Doc is wrong
// alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_KEY)
alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
else alert("An unknown error occurred.");
}
function onGDirectionsLoad(){
// Use this function to access information about the latest load()
// results.
// e.g.
// document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
// and yada yada yada...
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<h2>Maps API Directions Illustrated</h2>
<form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">
<table>
<tr><th align="right">From: </th>
<td><input type="text" size="25" id="fromAddress" name="from"
value="San Francisco"/></td>
<th align="right"> To: </th>
<td align="right"><input type="text" size="25" id="toAddress" name="to"
value="Mountain View" /></td></tr>
<tr><th>Language: </th>
<td colspan="3"><select id="locale" name="locale">
<option value="en" selected>English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ja">Japanese</option>
<option value="es">Spanish</option>
</select>
<input name="submit" type="submit" value="Get Directions!" />
</td></tr>
</table>
</form>
<br/>
<table class="directions">
<tr><th>Formatted Directions</th><th>Map</th></tr>
<tr>
<td valign="top"><div id="directions" style="width: 275px"></div></td>
<td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>
</tr>
</table>
<h2>Maps API Directions Illustrated 2nd Map</h2>
<form action="#" onsubmit="setDirections2(this.from.value, this.to.value, this.locale.value); return false">
<table>
<tr><th align="right">From: </th>
<td><input type="text" size="25" id="fromAddress2" name="from"
value="San Francisco"/></td>
<th align="right"> To: </th>
<td align="right"><input type="text" size="25" id="toAddress2" name="to"
value="Mountain View" /></td></tr>
<tr><th>Language: </th>
<td colspan="3"><select id="locale" name="locale2">
<option value="en" selected>English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ja">Japanese</option>
<option value="es">Spanish</option>
</select>
<input name="submit" type="submit" value="Get Directions!" />
</td></tr>
</table>
</form>
<br/>
<table class="directions">
<tr><th>Formatted Directions</th><th>Map</th></tr>
<tr>
<td valign="top"><div id="directions" style="width: 275px"></div></td>
<td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>
</tr>
</table>
</body>
</html>
I'm sorry if this is in the wrong section... I am not sure how to do it... Here is the coding: Code: function displayTitle(name, x, y){
return name + " <a href='#' onClick='showDirectionsDialog(\""+name+"\", "+x+", "+y+")'><img src='images/direction.png' alt='Get driving directions'/></a>";
}
function showDirectionsDialog(name, x, y){
var d=dijit.byId("dialogDirections");
d.set("title", "Get directions to \""+name+"\"");
document.getElementById("txtToX").value=x;
document.getElementById("txtToY").value=y;
d.show();
}
function getDirections(){
var frmX=document.getElementById("txtFrmX").value;
var frmY=document.getElementById("txtFrmY").value;
var toX=document.getElementById("txtToX").value;
var toY=document.getElementById("txtToY").value;
var routeData = new Route;
routeData.routeStops = frmX+","+frmY+";"+toX+","+toY;
routeData.routeMode = "DRIVE";
routeData.avoidERP=0;
routeData.routeOption = "Shortest";
routeData.GetRoute(showDirections);
}
function showDirections(routeResults){
if (routeResults.results=="No results"){
alert("No directions found, please try other location.");
return;
}
}
Here is the coding I have now: Code: function getDirections() {
var routeData = new Route;
routeData.routeStops = document.getElementById('txtTheme').value;
routeData.routeMode = document.getElementById('txtOtptFlds').value;
routeData.avoidERP = document.getElementById('txtExtent').value;
routeData.routeOption = "Shortest";
routeData.GetRoute(showRouteData)
}
function showRouteData(routeResults)
{
if (routeResults.results=="No results"){
alert("No Route found, please try other location.")
return
}
else if (routeResults.results=="Stops more than nine"){
alert("Number of stops exceed than nine");
return;
}
directions = routeResults.results.directions[0];
directionFeatures = directions.features;
var routeSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0,0,255,0.5])).setWidth(4);
var mergedGeometry = new esri.geometry.Polyline()
mergedGeometry.addPath(routeResults.results.routes.features[0].geometry.paths[0])
OneMap.map.graphics.clear();
OneMap.map.graphics.add(new esri.Graphic(mergedGeometry, routeSymbol));
//Display the total time and distance of the route
document.getElementById("results").innerHTML = "<br /> Total distance: " + directions.summary.totalLength + "<br /> Total time: " + directions.summary.totalTime;
//List the directions and create hyperlinks for each route segment
for (var i=0;i<directions.features.length;i++)
{
var feature=directions.features[i]
document.getElementById("results").innerHTML= document.getElementById("results").innerHTML + '<br><u>' + parseInt(parseInt(i)+1) + ". " + feature.attributes.text + " (" + feature.attributes.length + ", " + feature.attributes.time + ")</u>"
}
}
I am not sure how to integrate my codings into the other codings. There is a name of the place (lets say London) and a clickable icon by the side. When I click the icon, a dojo toolkit dialog box appear for me to enter my location (the other place, London, will be displayed in the dialog box) Click "Go" to get the directions... I wish to have the directions also placed in a dialog box too... Hi, I've had this idea lately that I have a button that when I hover it, drop down menus come out from the left, the right, and below the button. Would this be doable in any way? Thank you. I'm still kinda new at this. Please bear with me..I'm trying to make all imgs move in different directions using the following code. I was givin the code and I need to insert something into it so this will work. I just can't understand it and WANT to ..driving me NUTTY. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BUZZ</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var widthMax = 0;
var heightMax = 0;
var buzzSpeed = new Array(3);
buzzSpeed[0] = 10;
var xPosition = new Array(3);
xPosition = -20;
var yPosition = new Array(3);
yPosition[0] = 0;
var xDirection = new Array(3);
xDirection[0] = "right";
var yDirection = new Array(3);
yDirection[0] = "down";
function setBug(newStartPoint) {
widthMax = document.documentElement.clientWidth;
heightMax = document.documentElement.clientHeight;
setInterval("flyBug(0)", 30);
}
function flyBug(curBug) {
var activeBug = document.getElementById("bugImage" + curBug);
var activeElement = document.getElementById("bugElement" + curBug);
if (xDirection[curBug] == "right" && xPosition[curBug] > (widthMax - activeBug.width - buzzSpeed[curBug]))
xDirection[curBug] = "left";
else if (xDirection[curBug] == "left" && xPosition[curBug] <= 0)
xDirection[curBug] = "right";
if (yDirection[curBug] == "down" && yPosition[curBug] > (heightMax - activeBug.height - buzzSpeed[curBug]))
yDirection[curBug] = "up";
else if (yDirection[curBug] == "up" && yPosition[curBug] <= 0)
yDirection[curBug] = "down";
if (xDirection[curBug] == "right")
xPosition[curBug] = xPosition[curBug] + buzzSpeed[curBug];
else if (xDirection[curBug] == "left")
xPosition[curBug] = xPosition[curBug] - buzzSpeed[curBug];
else
xPosition[curBug] = xPosition[curBug];
if (yDirection[curBug] == "down")
yPosition[curBug] = yPosition[curBug] + buzzSpeed[curBug];
else if (yDirection[curBug] == "up")
yPosition[curBug] = yPosition[curBug] - buzzSpeed[curBug];
else
yPosition[curBug] = yPosition[curBug];
activeElement.style.left = xPosition[curBug] + document.documentElement.scrollLeft + "px";
activeElement.style.top = yPosition[curBug] + document.documentElement.scrollTop + "px";
}
window.onresize = setBug;
</script>
</head>
<body onload="setBug()">
<div id="bugElement0" style="position:absolute; left:20px; top:0px;">
<img id="bugImage0" src="bug.jpg" alt="buggy" height="48" width="48" /></div>
<div id="bugElement1" style="position:absolute; left:25%; top:75%;">
<img id="bugImage1" src="bug.jpg" alt="buggy1" height="48" width="48" /></div>
<div id="bugElement2" style="position:absolute; left:40%; top:48%;">
<img id="bugImage2" src="bug.jpg" alt="buggy2" height="48" width="48" /></div>
<div id="bugElement3" style="position:absolute; left:58%; top:58%;">
<img id="bugImage3" src="bug.jpg" alt="buggy3" height="48" width="48" /></div>
<div id="bugElement4" style="position:absolute; left:90%; top:75%;">
<img id="bugImage4" src="bug.jpg" alt="buggy4" height="48" width="48" /></div>
</body>
</html>
Greetings, I have a GMAP2 setup on my website that gives driving directions from Point A to Point B. I want to add functionality that allows a user to alter the directions once the polyline has already been plotted. Working Example: Google Driving Directions My Driving Directions: Green Traffic Driving Directions What javascript do I need to tweak to get the line to be draggable? Thanks in advance for any information and / or assistance. Sincerely, Travis Walters I have a page with a GoogleMap with a GoogleBar and I would like the GoogleBar to appear with something written in it already and to have that search executed. In other words, I would like to "write something to the GoogleBar and press Enter" automatically as soon as the map loads. How can I do this? btw: By GoogleBar, I mean the search bar that appears on the map after using the enableGoogleBar() function. 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. Can the Google API replace scraping? You can get blocked by Google if you scrape, but can you get the same info from the Google API at no risk?
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')" />
Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" />
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 Hello. I have a problem. I use google map to show some points. I have to show all points for some region, and number of points gets to 4.000. So it takes some minutes to show all points. I use gif image-> size: 400 bytes I found http://fundrace.huffingtonpost.com/ and it takes only couple of seconds to load more 1000 markes. Does someone know how to resolve this? Thanks Hey all I'm quite a newbie at javascript and I'm trying to have links to google maps markers. I have a page with my embeded google maps on it and some markers. What I'm basically looking to do is have a web page with a menu down the side and when you click the menu items, the google maps markers would pop up on the map. For example, city attractions down a side menu and when you click say restaurants, the markers would pop up the location restaurants in a certain place, then you could click pubs and the restaurant markers would dissapear and the pub markers would appear. Can anyboy help me with this or even direct me to some code that would help. Thanks all. I have some problems with intergrating google maps into my page I cant seem to get a marker to appear on my map. I have tried numerous methods but non seem to work. I have integrated the google maps on my main site, repositioned and re-sized. The code below is a test page i work on to get code to work. It's just a map on a page entire code: <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 25px; padding: 25px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDrxZnpYBNIwzBFVYaDY__BMONEjNEGZaI&sensor=false"> </script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);} var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World!" }); </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> can anybody tell my where i am going wrong and just the map appears with no marker? thanks Hi I have just started looking at the Google maps, and have atutorial that will get the co-ordinates. What I want this to do, is then populate two fields on a form one called longitude and one called latitude Code: function usePointFromPostcode(postcode, callbackFunction) {
localSearch.setSearchCompleteCallback(null,
function() {
if (localSearch.results[0]) {
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
var point = new GLatLng(resultLat,resultLng);
callbackFunction(point);
}else{
alert("Postcode not found!");
}
});
localSearch.execute(postcode + ", UK");
}
Any ideas/tips would be be much appreciated Hi there, I know too little of JavaScript to get the Google Maps API working. I hope someone can help me out! My goal is to display an address. In the example on google, you can input it through a form: http://code.google.com/apis/maps/doc...ng-simple.html I would like the map to show the location+marker when I open the page, not after clicking a submit button. However, I only want an address in my html. I want the API to convert it in a LatLng format. Hopefully, someone can take the time to look at it. It's all in the source code of the page mentioned above, I believe. Thanks! Is there a javascript that when I mouse over a object like the the magnifying glass that can be seen after a google search that will display a preview image and then make that image clickable to pull up that webpage/file? TYIA James i take an google suggestions code. view source... i hope that is the best "ajax google suggestions" code created... and try to understand it. someone can help to understand that javascript ? write remarks... formated code file attached + : Link1 Hi, I have just set up google analytics on my website but it is showing tracking unknown symbol in the status. Is it just the case of it taking time to set up or should it work straight away. Thanks Tyler I started using Google API Visualizations to create a bar chart which was very easy because of the code examples google gives but then I realised instead of setting the values I want within the html I wanted a form which would let you input the values you want for the bar chart. I made it look like this: Using this code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<SCRIPT LANGUAGE="JavaScript">
function UpdateChart (form) {
var TeamA = form.TeamA.value;
var TeamB = form.TeamB.value;
var TeamC = form.TeamC.value;
var TeamD = form.TeamD.value;
}
</SCRIPT>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['barchart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Score');
data.addRows(4);
data.setValue(0, 0, 'Team A');
data.setValue(0, 1, 500);
data.setValue(1, 0, 'Team B');
data.setValue(1, 1, 300);
data.setValue(2, 0, 'Team C');
data.setValue(2, 1, 70);
data.setValue(3, 0, 'Team D');
data.setValue(3, 1, 150);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data, {title: 'Scores', legend: 'none'});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<form name="input" method="get">
Team A:
<input type="text" name="TeamA" value="0" size="1">
<br>Team B:
<input type="text" name="TeamB" value="0" size="1">
<br>Team C:
<input type="text" name="TeamC" value="0" size="1">
<br>Team D:
<input type="text" name="TeamD" value="0" size="1">
<br>
<INPUT TYPE="button" NAME="btnUpdate" Value="Update" onClick="UpdateChart(this.form)">
</form>
</body>
</html>
However, instead of the values I've bolded I want the values from the form to be used. I've never really used Javascript before so I'm not sure what to do. Any help would be appreciated. Hi, Can anyone help define the difference between the 2 scripts below and help identify what is/should happen for each? Code: <script type="text/javascript">
var _gaq = _gaq || [];
//NHG COMMENT: if there is an existing account, then it needs to be incorporated within this tag.
//The xx-xxxx-x par represents the google account code that needs to be inserted
// if there is no existing tag in place, then take out the 2 follwoing lines marked (1) and (2)and (3)
(1) _gaq.push(['_setAccount', 'XX-XXXXXX-X']);
(2) _gaq.push(['_setDomainName', 'MYSUBDOMAIN.domain.com']);
(3) _gaq.push(['_trackPageview']);
NHG COMMENT: This is the global tag and everything below this MUST NOT BE CHANGED
_gaq.push(['_setAccount', UA-16522538-1']);
_gaq.push(['_setDomainName', 'domain.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Code: // copy and paste the tag below
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'XX-XXXXXX-X']);
_gaq.push(['_setDomainName', 'MYSUBDOMAIN.domain.com']);
_gaq.push(['_trackPageview']);
_gaq.push(['_setAccount', UA-16522538-1']);
_gaq.push(['_setDomainName', 'domain.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Hello guyz! I need to fetch some images whit custom sizes in Google Images, this is the API from Google that let me search end fetch images: Code: /*
* How to search for images and restrict them by size.
* This demo will also show how to use Raw Searchers, aka a searcher that is
* not attached to a SearchControl. Thus, we will handle and draw the results
* manually.
*/
google.load('search', '1');
function searchComplete(searcher) {
// Check that we got results
if (searcher.results && searcher.results.length > 0) {
// Grab our content div, clear it.
var contentDiv = document.getElementById('content');
contentDiv.innerHTML = '';
// Loop through our results, printing them to the page.
var results = searcher.results;
for (var i = 0; i < results.length; i++) {
// For each result write it's title and image to the screen
var result = results[i];
var imgContainer = document.createElement('div');
var title = document.createElement('h2');
// We use titleNoFormatting so that no HTML tags are left in the title
title.innerHTML = result.titleNoFormatting;
var newImg = document.createElement('img');
// There is also a result.url property which has the escaped version
newImg.src = result.tbUrl;
imgContainer.appendChild(title);
imgContainer.appendChild(newImg);
// Put our title + image in the content
contentDiv.appendChild(imgContainer);
}
}
}
function onload() {
// Our ImageSearch instance.
var imageSearch = new google.search.ImageSearch();
// Restrict to extra large images only
imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,
google.search.ImageSearch.IMAGESIZE_MEDIUM);
// Here we set a callback so that anytime a search is executed, it will call
// the searchComplete function and pass it our ImageSearch searcher.
// When a search completes, our ImageSearch object is automatically
// populated with the results.
imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]);
// Find me a beautiful car.
imageSearch.execute("Subaru STI");
}
google.setonloadCallback(onload);
But all I could find about restricted images sizes is this: Code: imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,
google.search.ImageSearch.IMAGESIZE_MEDIUM);
My problem is that I need custom fixes images sizes, not between a range of values like the above script was giving me... Google API reference says that: Code: google.search.ImageSearch.RESTRICT_IMAGESIZE - When this is specified as the value of type, the image search results will be restricted to images with certain pixel dimensions. Valid optional values for this type are as follows: * google.search.ImageSearch.IMAGESIZE_SMALL - restrict to small images, icons * google.search.ImageSearch.IMAGESIZE_MEDIUM - restrict to medium images * google.search.ImageSearch.IMAGESIZE_LARGE - restrict to large images * google.search.ImageSearch.IMAGESIZE_EXTRA_LARGE - restrict to extra large images Those who wants to play whit Google Playground, this is the link: Code: http://goo.gl/sPs2 Could some one help me get that images whit fixed sizes? |
|||||||