I want your guys' help on this. I wrote the code for allowing users to create markers(with infowindow) with a 'click' function that will save the lat/lan and other info to a MySQL database that will then be called to show the markers on the map. When you click on the map, it creates a marker but it will not save the info in the infowindow to the database. I followed the guide from the google maps developer's guide but I still can't get it to work. I even triple checked to make sure my MySQL login details work correct and still nothing.
Here is the code to the map itself:
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? sensor=false"></script>
<script type="text/javascript">
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(37.4419, -122.1419);
var options = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
var html = "<table>" +
"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Type:</td> <td><select id='type'>" +
"<option value='bar' SELECTED>bar</option>" +
"<option value='restaurant'>restaurant</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
}
function saveData() {
var name = escape(document.getElementById("name").value);
var address = escape(document.getElementById("address").value);
var type = document.getElementById("type").value;
var latlng = marker.getPosition();
var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
"&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
document.getElementById("message").innerHTML = "Location added.";
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map-canvas" style="width: 500px; height: 300px"></div>
<div id="message"></div>
</body>
</html>
This is what is supposed to save info to the database(phpsqlinfo_addrow.php):
<?php
require("phpsqlinfo_dbinfo.php");
// Gets data from URL parameters
$name = $_GET['name'];
$address = $_GET['address'];
$lat = $_GET['lat'];
$lng = $_GET['lng'];
$type = $_GET['type'];
// Opens a connection to a MySQL server
$connection=mysql_connect ("localhost", $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Insert new row with user data
$query = sprintf("INSERT INTO markers " .
" (id, name, address, lat, lng, type ) " .
" VALUES (NULL, '%s', '%s', '%s', '%s', '%s');",
mysql_real_escape_string($name),
mysql_real_escape_string($address),
mysql_real_escape_string($lat),
mysql_real_escape_string($lng),
mysql_real_escape_string($type));
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
?>
hi i have same issue with my project to save customer location,
which they click on there browser,
what i did was i save location in latitude and longitude in two input box as{you may take it hidden so it will not seen} in and give submit button and submit form i have given code you can also change it to submit form on click on map by submitting form on click by this and you can also store latitude and longitude in same column if you want
and you will need to insert you key
document.getElementById("yourform").submit();
<html>
<head>
<style type="text/css">
#map_canvas {height:300px;width:500px}
</style>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=""""youerapikeyhere""""&language=mr"></script>
<script type="text/javascript">
var map;
var marker;
var markersArray = [];
function initialize()
{
var latlng = new google.maps.LatLng(18.5236, 73.8478);
var mapOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
if (marker) {
marker.setMap(null); //code
}
//adding marker
document.getElementById('txtLat').value=event.latLng.lat();
document.getElementById('txtLng').value=event.latLng.lng();
marker= new google.maps.Marker({
position: event.latLng,
map: map,
title: 'pune'
});
//creting info window instance
var infowindow = new google.maps.InfoWindow({
content: 'selected location'
});
//adding pointer click event to open infowindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<table cellpadding="0" cellspacing="0">
<tr><td colspan=3><div id="map_canvas" style="background-color: #ffffff"></div></td></tr>
<tr><td><input type="text" id="txtLat" name="txtLat"style="width:150px"></td>
<td><input type="text" id="txtLng" name="txtLng"style="width:150px"></td></tr>
</table></form>
</html>`
Try to narrow down the possibilities, or at least find out "where" it went wrong; meaning, is the issue caused from the front end or in the backend!?
If you use Webkit UA (browser) or its variants, use its Developer tools; if using Firefox, install an AddOn called FireBug. In the marker's click handler, try to output the coordinates using alert() or console.log() and see if the results are accurately fetched. Next check whether the AJAX call is passed as it should be to the backend.
In your PHP, try to examine the incoming values (from request parameters). Also turn on the debug output in php.ini so you'll know if the DB connections are successfully made by checking stderr or system logs.
There's a lot of things that could go wrong. It's hard to tell given by the lack of details you provided, but I hope my reply helps you to get a good start.
Oh, BTW, I'd strongly suggest you switch to PDO over mysql_, the mysql_ are to be deprecated in the future.
Related
I'm following this tutorial, using Ruby on Rails instead of PHP and MySQL (class requirements). I can right-click on the map to add a marker, left-click on the marker to make an infowindow popup, and I can fill out the infowindow, but when I click 'Save & Close' I get the error
Uncaught ReferenceError: saveData is not defined at HTMLInputElement.onclick (http://localhost:4000/#/user:1:1)onclick # VM83 user:1
Using debugger, I can confirm that saveData() never gets called.
What do I need to do to save the inputted info on the infowindow? Also, if you have input on my promise chain in mapController.js below (is it correct, etc).
Things I Have Tried
remove async defer from index.html script tag per stackOverflow suggestion.
re onclick='saveData()', I have removed the quotes and the parentheses in all permutations.
I manually typed out the line where onclick='saveData()' is found.
I moved the saveData function inside the initiliaze function per stackOverflow suggestion.
I renamed it to infowindow.saveData() per stackOverflow suggestion.
moved saveData() above initialize().
changed all lets to vars
added onload='initialize()' to div tag in _user.html, several permutations including nested divs, moving ng-controller, etc.
moved code from mapController.js to _user.html inside a script tag.
My Code
_user.html
<div ng-controller="mapController as map" id="map" style="width:100%; height:80vh;"></div>
mapController.js
angular.module('tour').controller('mapController', function() {
let self = this,
marker,
infowindow;
function initialize() {
var latlng = new google.maps.LatLng(37.0902, -95.7129);
var options = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), options);
var html = "<table>" +
"<tr><td>Title:</td> <td><input type='text' id='title'/> </td> </tr>" +
"<tr><td>Description:</td> <td><input type='text' id='description'/></td> </tr>" +
"<tr><td>Audio URL:</td> <td><input type='url' id='audio'/></td> </tr>" +
"<tr><td>Category:</td> <td><select id='category'>" +
"<option value='art' SELECTED>art</option>" +
"<option value='history'>history</option>" +
"<option value='literature'>literature</option>" +
"<option value='music'>music</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "rightclick", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
}); // end addListener
}); // end addListener
} // end initialize function
function saveData() {
var marker = {
title: escape(document.getElementById("title").value),
description: escape(document.getElementById("description").value),
audio: document.getElementById("audio").value,
category: document.getElementById("category").value,
longitude: marker.lng(),
latitude: marker.lat()
}
return $http({
url: `${rootUrl}/users/:id/add_marker`,
method: 'POST',
data: {marker: marker},
headers: {
'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('token'))
}
})
.then(function(res){
let markers = self.currentUser.markers;
let newMarker = res.config.data.marker;
markers.unshift(newMarker); // adds to beginning of array
})
.catch(function(error){
console.log('ERROR ~>', error);
});
}
initialize();
});
window.saveData = function(){ /* your code here */ }
onclick="window.saveData()"
This question already has answers here:
How do I pass JavaScript variables to PHP?
(16 answers)
Closed 6 years ago.
I'm trying to build a small site that tracks the location of a car, and stores the data in a database. At the moment, I have it all set up with a .php file, with the Javascript smooshed in - I'm really not sure if this is advisable, I'm pretty new to programming for the web.
I need the "lati" variable, within the big script, to be sent to the PHP script (bottom of the code).
The code all works, it tracks the user and submits data to the database, but the field that it populates in the database is blank :( See my code -
<!DOCTYPE html>
<?php
$username = "ishuttle";
$password = "m7elH07yO2";
$hostname = "localhost";
$dbname = "ishuttle_taxi-location";
//connection to the database
$conn = mysqli_connect($hostname, $username, $password, $dbname)
or die("Unable to connect to MySQL");
echo "Connected to MySQL<br>";
?>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 100;
}
#map {
height: 70%;
width: 100%;
}
</style>
</head>
<body>
<center>
<h1>DANKCATT DRIVER SIDE APP</h1>
</center>
<div id="map"></div>
<div id="capture"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
var Lati;
var Longi;
Lati = 3;
Longi = 3;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 15
});
var timerID = setInterval(function() {
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var lati = {
lat: position.coords.latitude
};
var longi = {
lng: position.coords.longitude
};
console.log(lati, "Lol");
infoWindow.setPosition(pos);
infoWindow.setContent('lati');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
//in a loop (setInterval) get coords and apply them to database
}, 10 * 1000);
}
//reverse this for the home page - drag the coords out of the db and display them on a loop
google.maps.event.addDomListener(window, 'load', getLocation);
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDONVV6mCAgATiPAanIbdfY55_felLGHHk&callback=initMap">
</script>
<?php
$lati = $_GET['Lati'];
$sql = "UPDATE driver_location SET Latitude = '$lati' WHERE ID_No = 1111;";
echo "$lati";
if ($conn->query($sql) === TRUE) {
echo "Table MyGuests created successfully";
} else {
echo "Error creating table: " . $conn->error;
}
?>
</body>
</html>
You may want to separate your php database code into another file so that you can do an ajax post from your javascript file to the php file.
Here is an example of an ajax post using jquery. This is the javascript that would allow you to post from javascript into a php page:
$.ajax({
method: 'POST',
url: 'likeComment.php',
data: {'commentId': commentId},
success: afterLikeComment,
dataType: 'json'});
Learn Jquery is a site for learning jquery and here is the jquery site itself Jquery site. jQuery is a Javascript wrapper that makes doing things like selecting dom elements and posting to php much easier.
I found a script on google maps api page where user can select location and send data to PHP -> MySQL. It works fine in chrome and IE, but when i try to save location in mozilla, all it does is refresh parent page.
I'm pretty much clueless when it comes to javascript, so if anyone can find error, would appreciate it :)
Code
<!DOCTYPE html >
<head>
<meta name=viewport content='initial-scale=1.0, user-scalable=no' />
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js'></script>
<script type='text/javascript'>
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(33.137550, -42.187500);
var options = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), options);
var html = "<table><tr><td><input type='button' value='Save Location' onclick='saveData(), window.parent.location.reload();'/></td></tr></table>";
infowindow = new google.maps.InfoWindow({
content: html
});
function addMarker(location) {
if (!marker) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
else { marker.setPosition(location); }
}
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
});
}
function saveData() {
var latlng = marker.getPosition();
var url = 'insert_location.php?lat=' + latlng.lat() + '&lng=' + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length >= 1) {
infowindow.close();
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body style='margin:0px; padding:0px;' onload='initialize()'>
<div id='map-canvas' style='width: 100%; height: 800px'></div>
<div id='message'></div>
</body>
</html>
Javascript isn't off by default, but maybe yours is turned off.
If you want to turn Javascript on, please do the following:
Type about:support into your address bar, press Enter
Accept the warning
Search for javascript.enabled
Make sure the value is true. (Double click it if it is not)
And statements like this - "I'm pretty much clueless when it comes to javascript" aren't going to help you. Put some effort into it and research before you come here asking for the rest of us to solve your issue for you.
I'm working with the Instagram and google API. I'm trying to create thumbnail images from instagram to replace the markers on a Google Map by storing the longitude and latitude from the Instagram images. I am able to make the markers clickable to show the images but I would like to replace the markers to show small thumbnails instead (similar to the instagram map function http://www.topnews.in/files/instagram-photo-map.jpg)
Here is my 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></title>
<?php
$lat = "";
$long = "";
function getMarkers(){
global $lat ;
global $long ;
$request ="https://api.instagram.com/v1/media/search? lat=".$lat."&lng=".$long."&access_token=__";
$crl = curl_init(); //creating a curl object
$timeout = 10; //so it stops getting info after failing for more than number
curl_setopt ($crl, CURLOPT_URL, $request);
curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
$json = curl_exec($crl); //perhaps should be called $xml_to_parse!
curl_close($crl); //closing the curl object
$json1 = json_decode($json, true);
$json2 = json_decode($json);
//$decodeSearch = json_decode($searchlocation, true);
//$searchlocation = $instagram- >mediaSearch("","","","",20);
$dataCount = count($json2->data);
$dataObjects = $json2->data;
foreach($dataObjects as $currentObject) {
echo "[".$currentObject->location->latitude.",".$currentObject- >location->longitude.",'".$currentObject->images->low_resolution->url."'],";
}
}// close function
?>
<!-- this key belongs to Tamsin! -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? key=__&sensor=false">
</script>
<script type="text/javascript">
var map;
var marker;
var markersArray = [<?php getMarkers(); ?>];
function initialize() {
var infoWindow = new google.maps.InfoWindow;
var myLatLong = new google.maps.LatLng(<?php echo "".$lat.",".$long.""; ?>);
var mapOptions = {
center: myLatLong,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
// loop around markersArray
for(var i = 0; i < markersArray.length; i++){
var html = "<img src='"+markersArray[i][2]+"' />";//url
myLatLong = new google.maps.LatLng(markersArray[i][0],markersArray[i][1]);
marker = new google.maps.Marker({
position: myLatLong,
map: map,
});
bindInfoWindow(marker, map, infoWindow, html);
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, this);
});
}
</script>
</head>
You can use Custom Markers on Google Maps.
You can either select an icon from the available library, or use an image URL of your own as a marker, for instance an Instagram picture URL as described below:
var marker = new google.maps.Marker({
map: map,
position: myLatLng,
animation: google.maps.Animation.DROP,
icon: {
url: 'http://distilleryimage10.s3.amazonaws.com/ee6a320caaa711e2b60722000a9f09f0_5.jpg',
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(16, 16),
scaledSize: new google.maps.Size(32, 32)
}
});
Please take a look at the Complex Icons documentation to have more information about attributes about size and position of your markers like some I used above the resize the icon to 32x32 pixels.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Ok, I'm using the Google Maps API and I need to convert my users location they enter, convert it to Latitude/Longitude using the API. So far, I just have some PHP, But i'm not sure how to implement this into the javascript, etc.
<?php
$coords = toCoordinates("88 Main St. New York New York USA");
function toCoordinates($address)
{
$bad = array(
" " => "+",
"," => "",
"?" => "",
"&" => "",
"=" => ""
);
$address = str_replace(array_keys($bad), array_values($bad), $address);
$data = new SimpleXMLElement(file_get_contents("http://maps.google.com/maps/geo?output=xml&q={$address}"));
$coordinates = explode(",", $data->Response->Placemark->Point->coordinates);
return array(
"latitude" => $coordinates[0],
"longitude" => $coordinates[1]
);
}
?>
Thank you!
first you have to create the xml and after that pass the xml to the javascript stated below
<?xml version="1.0" encoding="UTF-8"?>
<markers>
<marker Company_Name="Company Name" address="Address" lat="39.74259" lng="-104.98359" type="comp"/>
<marker Company_Name="Company Name" address="Address" lat="39.6823891" lng="-104.9373677" type="comp"/>
</markers>
<script src="https://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
comp: {
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=<?php echo $allcompanyaddress[8];?>|FF0000|000000',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
};
function myload() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?php echo $info['latitude']; ?>, <?php echo $info['longitude'];?>),
zoom: 10,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
// downloadUrl("<?php echo base_url();?>user_jobplacement/googlemap_record/'", function(data) {
downloadUrl("URL of your XML", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("Company_Name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var broker = markers[i].getAttribute("broker");
var phone = markers[i].getAttribute("phone");
var paid = markers[i].getAttribute("paid");
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'mouseover', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
window.onload = myload;
//]]>
</script>
<div id="map" style="width: 500px; height: 338px"></div>
Have you tried using JQuery for that? You simply need to use GET with parameters(address in your case) like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.get(
"http://maps.googleapis.com/maps/api/geocode/json?address=88 Main St. New York New York USA&sensor=true",
function(data) {
console.log(data);
}
);
});
</script>
</head>
</html>
In return you get all the content in data variable(object) from which you can simply extract the latitude and longitude. For your case change the address in URL to value entered by user.