JQuery JavaScript Error in Browser, Not Dreamweaver - javascript

I'm trying to create a webpage that takes a location via a text box, and plots all recent earthquakes near that location on Google Maps.
I'm using Dreamweaver to debug my code, and the webpage works perfectly when I use the built-in live webpage feature it includes.
However, when I open the saved file in a browser, all I get is an error "Geocode was not successful for the following reason: ERROR". This isn't exactly helpful for figuring out what the issue is, and I have very little experience with web languages and developing web sites.
Any help or insight you can lend me would be greatly appreciated.
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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&sensor=true">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
function codeAddress()
{
var loc = document.getElementById('locText').value;
geocoder.geocode( { 'address': loc}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var north = results[0].geometry.location.lat() + 1;
var south = results[0].geometry.location.lat() - 1;
var east = results[0].geometry.location.lng() + 1;
var west = results[0].geometry.location.lng() - 1;
var url;
url = 'http://api.geonames.org/earthquakesJSON?north=' + north + '&south=' + south + '&east=' + east + '&west=' + west + '&username=jpcguy89';
$.ajax(url,function(quakes)
{
$.each(quakes.earthquakes, function(k, aQuake){
var contentString = '<div id="content">' + '<p><b>ID:</b> ' + aQuake.eqid + '</p>' + '<p><b>Magnitude:</b> ' + aQuake.magnitude + '<p><b>Date:</b> ' + aQuake.datetime + '<p><b>Depth:</b> ' + aQuake.depth + '</div>';
var infowindow = new google.maps.InfoWindow
({
content: contentString
});
var latLng = new google.maps.LatLng(aQuake.lat,aQuake.lng);
var marker = new google.maps.Marker
({
position: latLng,
map: map,
title: 'Earthquake (' + aQuake.eqid + ')'
});
google.maps.event.addListener(marker, 'click', function()
{
infowindow.open(map,marker);
});
});
});
}
else
{
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<br />
<br />
<div id="test"></div>
<br />
<br />
<form id="geonamesFetch">
City/Location: <input type="text" id="locText" />
<input type="submit" id="submit" onclick="codeAddress()" />
</form>
<div id="map-canvas"/>
<p> </p>
<p> </p>
</body>
</html>
http://jsfiddle.net/mZGL3/

You are binding the click handler in the HTML:
<input type="submit" id="submit" onclick="codeAddress()" />
Done this way, the JavaScript is executed, but then the form is immediately submitted. You need to prevent the form from submitting. Remove the click handler from the html:
<input type="submit" id="submit" />
And bind to the submit handler in your JavaScript so that you can prevent the form from submitting. Add this to your JavaScript:
$(function(){
$("#geonamesFetch").on("submit", function(e) {
e.preventDefault();
codeAddress();
});
});
Demo: jsfiddle.net/mZGL3/3/
Edit: The other problem you have is your call to $.ajax(). That method expects an object, but you are passing a function. You can either change your code to pass an object, setting the function you have now as the success property:
$.ajax(url, {
success: function(quakes) {
...
}
});
Or use $.get(), which accepts a function as the second argument:
$.get(url, function (quakes) {
...
});
Demo: jsfiddle.net/mZGL3/4/

You seem to be loading mixed protocol ressources.
And your jsFiddle seems to have a ressource missing (http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&sensor=true)
Fix your code to access NON httpS .. and try again.
Seen on your jsFiddle :
> Timestamp: 9/30/2013 3:40:41 PM Error: ReferenceError: google is not
> defined Source File: fiddle.jshell.net/mZGL3/show Line: 93
I updated your fiddle here, with the ressource, now, the error is : {"error": "Please use POST request"}

Related

How pass data from parent page to popup?

I have following code:
parent page:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href=# onclick='showMap()'>show map <a>
<div id="map-canvas"></div>
</body>
<script>
function showMap(){
window.open('map.html','map','width=600,height=400');
}
</script>
</html>
map.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
As you can see I use hardcode values for map marker rendering:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
Can I pass these values from parent page to popup?
Since you asked just how to pass from parent to pop up an option would be querystring parameters:
<a href=# onclick='showMap(-25.363882,131.044922)'>show map <a>
function showMap(lat,lng){
window.open('map.html?lat='+lat+'&lng ='+lng,'map','width=600,height=400');
}
Then in map.html collect those values and use..
Update: Collecting query string values can be done in a lot of ways see the options with a quick search
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var lat = getParameterByName('lat');
var lon = getParameterByName('lon');
taken from : https://stackoverflow.com/a/901144/306921
You can also take a look at: Get query string parameters with jQuery
I tested and its all working:
resulting index.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href=# onclick='showMap(-25.363882,131.044922)'>show map <a>
<div id="map-canvas"></div>
</body>
<script>
function showMap(lat,lng){
window.open('map.html?lat='+lat+'&lng ='+lng,'map','width=600,height=400');
}
</script>
</html>
and the resulting map.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var lat = getParameterByName('lat');
var lon = getParameterByName('lon');
function initialize() {
var myLatlng = new google.maps.LatLng(lat, lon);
var mapOptions = {
zoom: 4,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
QueryString is a good way. However based on your requirement, You can also store it in parent page and read via javascript.
Storing value in parent page using dom:
<input type="hidden" id="lat" value="...."/>
You can also google to find how to store the data with window object itself(e.g window.myVar='xxx') and reading it from pop-up.
Accessing value in pop-page opened via window.open
var lat =window.opener.getElementById("lat").value;//use window.parent if opened as iframe

hide Bing Maps AJAX v7 DirectionsManager infoboxes

I'm using for first time the DirectionsManager to create routes in Bing Maps AJAX v7. The route is created correctly, but comes with two small "infoboxes" showing "A" at the start of the route, and "B" at the final. I want to remove those infoboxes, but honestly, after reading all the documentation (http://msdn.microsoft.com/en-us/library/hh312832.aspx) and "Binging/Googling" a while, I can't found anything helpful. Also, I tried every option inside setRenderOptions. Any ideas?
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
directionsManager.resetDirections();
directionsManager.setRenderOptions({autoDisplayDisambiguation: false,
autoUpdateMapView: true, displayManeuverIcons: false, displayPreItineraryItemHints: false, displayPostItineraryItemHints: false, displayRouteSelector: false, displayStepWarnings: false, drivingPolylineOptions: { strokeColor: new Microsoft.Maps.Color(150, 255, 51, 51), strokeThickness: 8 }
});
directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
var seattleWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: '000 fake street, Houston TX 77000' });
directionsManager.addWaypoint(seattleWaypoint);
var tacomaWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: '111 fake street, Houston TX 77111' });
directionsManager.addWaypoint(tacomaWaypoint);
directionsManager.calculateDirections();
One possible solution is to customize the pushpin to display blank pushpin with a small size (I've tried with another pushpin with 15x15 pixels size):
// Set the render options
directionsManager.setRenderOptions({
itineraryContainer: document.getElementById('itineraryDiv'),
displayWalkingWarning: false,
walkingPolylineOptions:{strokeColor: new Microsoft.Maps.Color(200, 0, 255, 0)},
waypointPushpinOptions: {icon:'pin_blank.png', height:1, width:1}
});
The other way might consist in calling the service by yourself and handling the request and response in your code. Here is an example: http://msdn.microsoft.com/en-us/library/gg427607.aspx
Here is the code that might be what you will help you:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId: Microsoft.Maps.MapTypeId.road });
}
function ClickRoute(credentials)
{
map.getCredentials(MakeRouteRequest);
}
function MakeRouteRequest(credentials)
{
var routeRequest = "http://dev.virtualearth.net/REST/v1/Routes?wp.0=" + document.getElementById('txtStart').value + "&wp.1=" + document.getElementById('txtEnd').value + "&routePathOutput=Points&output=json&jsonp=RouteCallback&key=" + credentials;
CallRestService(routeRequest);
}
function RouteCallback(result) {
if (result &&
result.resourceSets &&
result.resourceSets.length > 0 &&
result.resourceSets[0].resources &&
result.resourceSets[0].resources.length > 0) {
// Set the map view
var bbox = result.resourceSets[0].resources[0].bbox;
var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
map.setView({ bounds: viewBoundaries});
// Draw the route
var routeline = result.resourceSets[0].resources[0].routePath.line;
var routepoints = new Array();
for (var i = 0; i < routeline.coordinates.length; i++) {
routepoints[i]=new Microsoft.Maps.Location(routeline.coordinates[i][0], routeline.coordinates[i][1]);
}
// Draw the route on the map
var routeshape = new Microsoft.Maps.Polyline(routepoints, {strokeColor:new Microsoft.Maps.Color(200,0,0,200)});
map.entities.push(routeshape);
}
}
function CallRestService(request)
{
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", request);
document.body.appendChild(script);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<input id="txtStart" type="text" value="Seattle"/>
<input id="txtEnd" type="text" value="Portland"/>
<input type="button" value="Calculate Route" onclick="ClickRoute()"/>
</body>
</html>

How do I set javascript variables or call functions with the razor syntax?

This is a beginners question about web programming. Basically I have a page that shows a default address using the Google Map API. It works fine looking up "221B Baker Street, London, United Kingdom", but there is a textbox that I would like to be able to write an address in and then look it up. It's an cshtml-page and I know of the razor syntax
#{if(IsPost) { do something }}
So basically I would like to take the Request.Form["FindAddress"]; from the textbox and and set it to the javascript myAddress variable so that the users address will be shown instead. But I don't know how to do it inline coding. It keeps giving me syntax errors when placing the IsPost-condition inside the -tag for the javascript functions. Here is the complete page
<!DOCTYPE html>
<html>
<head id="head">
<title></title>
<link href="#Server.MapPath("~/Styles/Site.css")" rel="stylesheet" type="text/css" />
</head>
<script src="http://maps.google.com/maps?file=api&v=2&key=<YOUR_API_KEY>&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
var myAddress = "221B Baker Street, London, United Kingdom"; // how do I overwrite this if it is (isPost)?
var map;
var geocoder;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.5, -0.1), 10);
map.setUIToDefault();
geocoder = new GClientGeocoder();
showAddress(myAddress);
}
}
function showAddress(address) {
geocoder.getLatLng(address, function (point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 15); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindow(address); } });
}
</script>
<body onload="initialize()" onunload="GUnload()">
<form id="form1" runat="server">
<div>
<input type="text" id="FindAddress" name="FindAddress" />
</div>
<div id="map" style="width: 500px; height: 500px"></div>
</form>
</body>
</html>
I haven't tried the below code, but I hope it will work. Basically I've put the conditional checking logic outside the script block and store the result in a variable and that is referenced in the javascript.
#{
var address = "221B Baker Street, London, United Kingdom";
if (Request.HttpMethod == "POST")
{
address = Request.Form["FindAddress"];
}
}
<script type="text/javascript">
var myAddress = "#address"; // how do I overwrite this if it is (isPost)?
var map;
var geocoder;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.5, -0.1), 10);
map.setUIToDefault();
geocoder = new GClientGeocoder();
showAddress(myAddress);
}
}
function showAddress(address) {
geocoder.getLatLng(address, function (point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 15); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindow(address); } });
}
</script>

Prototype, Google Maps Ajax API V3 - Errors but not sure why. - g.e is undefined

I am trying to write a simple (in my head ;D) page where a user can enter a location and it be displayed on a map. In the background there should be some fields:
latitude, longitude, zoom
These should be updated when a user enters a new location, moves the map or changes the zoom level.
Please find my code below, I am using the Prototype lib for this. The initial loading appears to work but when the map is moved I recieve an error in the console of:
g.e is undefined - main.js line 20
and on Zoom, the event is not fired. When a text search is made, LocationFound complains that SetLatLong is not a function?
Please help, I have spent the past few hours going in circles!!! :(
<html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var Map = {
gmap : '',
geocoder : '',
map_container : '',
geocode_input : '',
geocode_form : '',
CreateMap : function(){
this.map_container = $('gmap');
this.geocode_form = $('gmap_form');
this.geocode_input = $('gmap_input');
try {
this.ConfigureMap();
this.SetDefaultLocation();
this.ConfigureGeocoder();
this.Listen();
} catch(err) {
console.debug(err);
}
},
ConfigureMap : function() {
var DefaultMapOptions = {
zoom: 3,
center: new google.maps.LatLng(43.834526782236814, -37.265625),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.gmap = new google.maps.Map(this.map_container, DefaultMapOptions);
},
ConfigureGeocoder : function() {
this.geocoder = new google.maps.Geocoder();
},
SetDefaultLocation : function() {
//TODO: Check if a location string is already present
//if (google.loader.ClientLocation) { //default to IP location if possible - not using loader anymore so comment out for now.
// this.SetLatLong(google.loader.ClientLocation.latitude,google.loader.ClientLocation.longitude, 8);
//}
},
SetLatLong : function(lat, lon, zoomLevel){
this.gmap.setCenter(new google.maps.LatLng(lat, lon));
if (zoomLevel){
this.gmap.setZoom(zoomLevel);
}
$('latitude').value = lat;
$('longitude').value = lon;
},
Listen : function() {
google.maps.event.addListener(this.gmap, 'dragend', this.MapMoved());
google.maps.event.addListener(this.gmap, 'zoom_changed', this.Zoomed());
Event.observe(this.geocode_form, 'submit', this.FindLocation(this.geocode_input));
},
Zoomed : function (){
$('zoom').value = this.gmap.getZoom();
},
MapMoved : function(){
console.debug('map moved');
var position = this.gmap.getCenter();
this.SetLatLong(position.lat(), position.lng());
},
FindLocation : function(location){
if (location){
var address = location.value;
if (address){
try {
this.geocoder.geocode( { 'address' : address }, this.LocationFound );
} catch(err) {
console.debug(err);
}
}
}
return false;
},
LocationFound : function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
//THIS IS DYING TOO? :(
this.SetLatLong(results[0].geometry.location.lat(), results[0].geometry.location.lng());
} else {
alert("Geocode was not successful for the following reason: " + status);
}
}
};
document.observe('dom:loaded', function(event){
Map.CreateMap();
}.bind(this));
</script>
<style>
div#gmap {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<form action="http://maps.google.com/maps" id="gmap_form">
<p>
<label for="geocodeInput">Location Text:</label>
<input type="text" name="q" id="gmap_input">
<input type="submit" value="Zoom to place">
</p>
</form>
<div id="gmap"></div>
<p><strong>Latitude, Longitude:</strong> <input type="text" id="latitude"><input type="text" id="longitude"></span></p>
<p><strong>Zoom:</strong> <input type="text" id="zoom"></p>
</body>
This works
google.maps.event.addListener(this.gmap, 'dragend', function () { Map.MapMoved() });
The accepted answer doesn't make this obvious, but the issue here is that:
google.maps.event.addListener(this.gmap, 'zoom_changed', this.Zoomed());
Where:
Zoomed : function () { $('zoom').value = this.gmap.getZoom(); },
Notice specifically that the result of calling zoomed (ie. the undef that this.Zoomed() returns) is set as the event handler, not zoomed itself; the error here (g.e is undefined) is characteristic of passing an invalid value to a maps event handler API.
This code would work if it read:
google.maps.event.addListener(this.gmap, 'zoom_changed', this.Zoomed);

Passing Input From One Page To Another

I'm fairly new at this. I'm trying to build a store locator and trying to figure out how to pass an input value from one page to another page. User would input their zipcode or address in a form on one page and the map and locations would be called on another page using the input.
I'm using ehound store locator platform (sample - here -> http://www.ehoundplatform.com/api/1....nd-google.html)
The map/locator script is this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Store Locator Demo using FreeHound and Google Maps V.3</title>
<style type="text/css">
#map_canvas {
height: 400px;
width:710px;
margin-bottom: 10px;
}
.addressBox {
margin-bottom:10px;
}
</style>
<script type="text/javascript" src="http://www.ehoundplatform.com/api/1.0 /proximity.js?key=xz396aw1qe432q1"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=AU"></script>
<script type="text/javascript">
var geocoder;
var map;
var bounds;
var markersArray = [];
var infoWindow;
var mapCenterLat = '-28.1594';
var mapCenterLon = '135.6456';
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(mapCenterLat, mapCenterLon),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//initialise single info window to show only one at a time
infoWindow = new google.maps.InfoWindow();
//improve usability by centering map around search point on zoom in/out
google.maps.event.addListener(map, 'zoom_changed', function() { if(mapCenterLat && mapCenterLon) {
setTimeout('centerMap(mapCenterLat, mapCenterLon)', 300);
}
});
}
function addMarkerOverlay(location, title, infoBox, image) {
var marker = new google.maps.Marker({
position: location,
map: map,
icon: image
});
marker.setTitle(title);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(infoBox);
infoWindow.open(map, marker);
});
markersArray.push(marker);
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
function searchAroundMe() {
deleteOverlays();
bounds = new google.maps.LatLngBounds();
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
//custom marker to mark initial search location
var image = new google.maps.MarkerImage('search_location.png',
// This marker is 32 pixels wide by 32 pixels tall.
new google.maps.Size(32, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the center of the red circle at 16,16.
new google.maps.Point(16, 16)
);
addMarkerOverlay(results[0].geometry.location, 'search spot', 'search initiated from here', image);
bounds.extend(results[0].geometry.location);
var searchLatitude = results[0].geometry.location.lat();
var searchLongitude = results[0].geometry.location.lng();
mapCenterLat = searchLatitude;
mapCenterLon = searchLongitude;
freeHound = new FreeHound( 'showLocs' );
search = new FH_Search();
search.count = 10; //number of locations to be returned in the result set
search.max_distance = 0; //distance limit for proximity search in km, 0 for unlimited
//search from a specific point using latitude and longitude of that point
search.point = new FH_Location( new FH_LatLon( searchLatitude,searchLongitude ) );
//search.filters = new Array();
//search.filters.push( new FH_SearchFilter('cat_id', 'eq', '177') );
search.create_log = false;
freeHound.proximitySearch( search );
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function showLocs(response){
if ( response.error_code ) {
alert(response.error_message);
}
if ( response.record_set ) {
//show results in a table
var resultsTable = '<table border="1" cellspacing="0" cellpadding="3" summary="">';
resultsTable += '<tr>';
resultsTable += '<td>#<\/td>';
resultsTable += '<td>Street Address<\/td>';
resultsTable += '<td>Town/Suburb/City<\/td>';
resultsTable += '<td>Postal Code<\/td>';
resultsTable += '<td>State/Province<\/td>';
resultsTable += '<td>Distance<\/td>';
resultsTable += '<td>Longitude<\/td>';
resultsTable += '<td>Latitude<\/td>';
resultsTable += '<\/tr>';
for (var record_count = 0, rl = response.record_set.length; record_count < rl; record_count++ ) {
var record = response.record_set[record_count];
var title = record.details.location_name;
var infoBoxContent = '<strong>Location #'+(record_count+1).toString()+'<\/strong>';
infoBoxContent += '<br \/>'+record.address.street_address+'<br \/>'+record.address.town + ', ' + record.address.postal_code +'<br \/>';
infoBoxContent += 'Distance: '+record.distance.km+'km<br \/>';
addMarkerOverlay(new google.maps.LatLng(record.latitude, record.longitude), title, infoBoxContent, null);
if (record_count < 6) {
bounds.extend(new google.maps.LatLng(record.latitude, record.longitude));
}
resultsTable += '<tr>';
resultsTable += '<td>'+(record_count+1).toString()+'<\/td>';
resultsTable += '<td>'+record.address.street_address+'<\/td>';
resultsTable += '<td>'+record.address.town+'<\/td>';
resultsTable += '<td>'+record.address.postal_code+'<\/td>';
resultsTable += '<td>'+record.address.state+'<\/td>';
resultsTable += '<td>'+record.distance.km+'KM<\/td>';
resultsTable += '<td>'+record.longitude+'<\/td>';
resultsTable += '<td>'+record.latitude+'<\/td>';
resultsTable += '<\/tr>';
}
map.fitBounds(bounds);
resultsTable += '<\/table>';
var resultSet = document.getElementById('resultSet');
resultSet.innerHTML = resultsTable;
}
}
function centerMap(lat,lon) {
var centrePoint = new google.maps.LatLng(lat,lon);
map.setCenter(centrePoint);
}
</script>
</head>
<body onload="initialize()">
<div class="addressBox">
<form action="" onsubmit="searchAroundMe(); return false;">
<input id="address" type="textbox" value="">
<input type="submit" name="search" value="Address Search">
</form>
</div>
<div id="map_canvas"></div>
<div id="resultSet"></div>
</body>
</html>
and the form itself would be on another page. Trying to pull the address input over. This obviously doesn't work
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KOI Store Locator</title>
</head>
<body>
<div>
<form action="ehound.php" method="post">
<input id="address" name="address" type="textbox">
<input type="submit" name="search" value="Address Search">
</form>
</div>
</body>
</html>
I've looked around on passing inputs via php and such, but this script seems to call on javascript as well and I'm having trouble implementing anything that works. Any help would be greatly appreciated.
Attach a click handler to your form submission button, in the handler simply get the values needed from your form, build a query string with the needed parameters, and window.location.assign("yourotherpage.html?"+theQueryString). Then just pull the query string parameters in the javascript on the other page.
I am not sure what ehound is but in general there are 2 good ways to do this.
You just submitted a form which sends data to the server, so just have the server insert the data you need into the next page.
The specifics of how to accomplish this would be mostly dependant on what server you are using.
Or a non server approach:
store a cookie and then if the other page is on the same domain then you should be able to retrieve it.
Cookies are easy, http://www.quirksmode.org/js/cookies.html (you can skip the long and mildly confusing explanation about the specifics of cookies and just grab the script).
Another way you could pass the information around is in a hidden form element. This qustion is pretty similar and has some good advice.

Categories

Resources