<!DOCTYPE html>
<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: Reverse Geocoding</title>
<link
href="https://developers.google.com/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var variablejs;
geocoder = new google.maps.Geocoder();
var input = "41.021355,-96.020508";
var latlngStr = input.split(",", 2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({
'latLng': latlng
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
variablejs = results[0].formatted_address; * * //document.write(variablejs); Not working**
*
//window.location.href = "http://localhost/test2.php?ad="+ variablejs; Working*
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
}); * * document.write(variablejs); * * //writes undefined variable (not working)
</script>
</head>
<body></body>
</html>
The section (//document.write(variablejs); Not working), won't write the variable "variablejs", but when I use the method (//window.location.href = "http://localhost/test2.php?ad="+ variablejs; Working), it will write the url and forward the page passing the variable as a parameter. What I want to do is print that variable in the body of the same HTML.
I tried to initialize first the variable then write into the Body but It looks like that section is not accessible like a global variable or something like that. Please help.
Once the document is loaded, you can't use document.write without overwriting everything. You will need to manipulate the DOM, e.g. document.body.innerText=variablejs;. But I'd recommend
var d = document.createElement("div");
d.appendChild(document.createTextNode(variablejs));
document.body.appendChild(d);
You're assigning value to variablejs in the callback function you're passing to geocoder.geocode(). This means that you're trying to access and write it before the callback has been called and therefore you will not see any value set yet.
Debugging with Firebug or similar will help in these cases.
Also you can't use docuemnt.write like that after the document has been loaded, you'll need to do some DOM-manipulation instead.
Related
I hope you all are doing good,
I'm trying to make a map which shows an image in popup when clicked anywhere on map, but the image it will popup will be extracted using geocoding which will involve JavaScript google map API.
But the thing is, its not displaying anything when I click anywhere/any location on map.
I hope this topic interest many people, Looking forward for your help :)
Information= File extension= .html, Mapping library= Leaflet, and Google map API.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leafle Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.9.3/dist/leaflet.js" integrity="sha256- WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 1350px; height: 640px;"></div>
<script>
// setting map location and initiating a map variable
var map= L.map('map').setView([51.505, -0.09], 13);
// adding basemap tile so that the map variable appears when opened in browser
L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png').addTo(map);
// customizing the image shown when clicked at any location on map
map.on('click', function(e) {
var latlng = e.latlng;
var lat = latlng.lat;
var lng = latlng.lng;
var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + lng + "&key=AIzaSyD5m00mpDT_4zOOhYPpiEudiuwjP23OYSk";
fetch(url)
.then(function (response) {
if (!response.ok) {
throw new Error("HTTP error, status = " + response.status);
}
return response.json();
})
.then(function (data) {
window.alert(data);
})
.catch(function (error) {
window.alert("Fetch error: " + error);
});
// .then(function(response) {
// if (!response.ok) {
// throw new Error("HTTP error, status = " + response.status);
// }
// return response.json();
// })
// .then(function(data) {
// var placeName = data.results[0].formatted_address;
// var photoReference = data.results[0].photos[0].photo_reference;
// var imageUrl = "https://maps.googleapis.com/maps/api/place/photo?maxwidth=150&photoreference=" + photoReference + "&key=AIzaSyD5m00mpDT_4zOOhYPpiEudiuwjP23OYSk";
// var popupContent = '<h3>' + placeName + '</h3><img src="' + imageUrl + '" />';
// var popup = L.popup()
// .setLatLng(latlng)
// .setContent(popupContent)
// .openOn(map);
// });
});
</script>
</body>
</html>
Screen Display when clicked anywhere on map:
I have tried checking if API is invalid but doesn't seems like that's the case. Also, when I tried just printing code till error showing line till "fetch(url)", if gives some alert but when I
uncommented even "function(data)" lines the screen gets blank(not even the base map that was showing in above scenario).
Positively looking forward for any solution or debugging to make this code workable from developers and problem solver of this platform :))
I am using Google Maps API to load a map with draggable directions. It works fine and great when I have the javascript written out in the html file, but I am still adding functions and for readability's sake. Therefore, I decided to separate the two. What I got was this:
HTML:
<!doctype html>
<html>
<head>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="initial-scale=1.0">
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Create Route</title>
<script src="https://maps.googleapis.com/maps/api/js?key=XXXX" defer></script>
<script src="../JavaScript/create_route_map.js" defer></script>
</head>
<body>
<table>
<td>
<div id="map_canvas" name="map_canvas"></div>
</td>
<td>
<input size="25" id="hometown" type="text">
<input type = "button" value="Get Directions" onclick="calcRoute();">
</td>
</table>
</body>
</html>
JavaScript:
var rendererOptions = {
draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;
function initMap() {
var town = new google.maps.LatLng(46.8133,-100.7790);
var mapOptions = {
center: town,
zoom: 7
};
map = new google.maps.Map(document.GetElementByID('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
google.maps.event.addListener(directionsDisplay, 'directions_changed', function(){
computeTotalDistance(directionsDisplay.getDirections());
});
calcRoute();
}
function calcRoute() {
var start = "Town"
var end = document.getElementById('hometown').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initmap);
I've tried using the function loadscript() but that didn't work.
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?key=XXXX' +
'callback=initMap';
document.body.appendChild(script);
}
I've also tried removing the api key since it is no longer needed for v3, but that didn't work either.
Thoughts? Suggestions? What am I missing?
(I think an important side note is that the .css file includes the height and width for the map-canvas div.)
UPDATE
After retyping getElementById and placing the scripts above , the errors I'm getting from the browser console are:
ReferenceError: google is not defined
NetworkError: A network error occurred
How would I go about fixing the Reference Error?
When i am running the following code, which i have taken from this answer, i am getting Uncaught TypeError: Cannot read property 'geocode' of undefined error in browser's console, why its happening because on the body load here initialize function has to be called, and instead of calling initialize function here codeLatLng(lat, lng) is calling first.
<!DOCTYPE html>
<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>Reverse Geocoding</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng)
}
function errorFunction(){
alert("Geocoder failed");
}
function initialize() {
geocoder = new google.maps.Geocoder();
}
function codeLatLng(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results)
if (results[1]) {
//formatted address
alert(results[0].formatted_address)
//find country name
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {
//there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
//this is the object you are looking for
city= results[0].address_components[i];
break;
}
}
}
//city data
alert(city.short_name + " " + city.long_name)
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
</body>
</html>
There is no need to wait for the onload-event until you initialize the Geocoder-instance. You load the maps-API synchronously, so the API(including google.maps.Geocoder) is available immediately after loading the API.
The issue: when geolocation runs too fast, and the callback of navigator.geolocation.getCurrentPosition will be executed before the onload-event, geocoder is undefined.
Replace this line:
var geocoder;
with this line:
var geocoder = new google.maps.Geocoder();
So; I am developing this web application that works based on the location of the user.
The part that finds the coordinates and the part that converts those coordinates into an address both work individually. However the variable from the first function doesn't seem to transfer over to do the second function and I can't figure out why.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript">
var coordinates;
function getCoordinates(){
var options = {
enableHighAccuracy: true,
timeout: 4500,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
console.log('Enlem : ' + crd.latitude);
console.log('Boylam: ' + crd.longitude);
console.log('Hata Payı ' + crd.accuracy + ' metre.');
coordinates = new google.maps.LatLng(crd.latitude, crd.longitude);
alert(coordinates);
return coordinates;
};
function error(err) {
console.warn('HATA(' + err.code + '): ' + err.message);
};
navigator.geolocation.getCurrentPosition(success, error, options);
}
var ReverseGeocode = function () {
//This is declaring the Global variables
var geocoder, map, marker;
//This is declaring the 'Geocoder' variable
geocoder = new google.maps.Geocoder();
function GeoCode(latlng) {
// This is making the Geocode request
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if(status !== google.maps.GeocoderStatus.OK)
{
alert(status);
}
// This is checking to see if the Geoeode Status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
var address = (results[0].formatted_address);
//This is placing the returned address in the 'Address' field on the HTML form
document.getElementById('Address').value = results[0].formatted_address;
}
});
}
return {
Init: function () {
var latlng = getCoordinates();
alert(latlng);
GeoCode(latlng);
},
};
} ();
</script>
</head>
<body>
<div>
<input name="Address" type="text" id="Address" size="55" />
</div>
<div>
<input type="button" value="Adres Bul" onclick="ReverseGeocode.Init()">
</div>
<div id="map_canvas" style="height: 90%; top: 60px; border: 1px solid black;">
</div>
</body>
</html>
Your main problem: getCoordinates() does not return coordinates. So you cannot use it like this:
var latlng = getCoordinates();
Javascript has asyncronous stuff. That means it takes javascript some time to do it.
The way javascript handles this: You send a request, and you provide a callback (a function). Whenever javascript is ready, your callback will be executed. Positioning is one of those asynchronic things.
Here is a short example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript">
// this function is triggered when geolocation has found coordinates
function geolocationReturnedCoordinates(coordinates) {
document.getElementById('log').innerHTML =
'lat: ' + coordinates.coords.latitude +
'<br>lng: ' + coordinates.coords.longitude +
'<br>accuracy: ' + coordinates.coords.accuracy;
// Here would be a good place to call Reverse geocoding, since you have the coordinates here.
GeoCode(new google.maps.LatLng(coordinates.coords.latitude, coordinates.coords.longitude));
}
// geocoder
geocoder = new google.maps.Geocoder();
function GeoCode(latlng) {
// This is making the Geocode request
geocoder.geocode({'location': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var address = (results[0].formatted_address);
//This is placing the returned address in the 'Address' field on the HTML form
document.getElementById('Address').value = results[0].formatted_address;
}
});
}
function search_position_and_address() {
// we start the request, to ask the position of the client
// we will pass geolocationReturnedCoordinates as the success callback
navigator.geolocation.getCurrentPosition(geolocationReturnedCoordinates, null, null);
}
</script>
</head>
<body>
<input type="button" value="GO" onclick="search_position_and_address()"> Get position (coordinates) of the client. -- Then look for the address
<div id="log"></div>
<input id="Address" placeholder="Address">
</body>
</html>
It's up to you to put it back in your structure.
I just compiled the shortest code that permitted me to make my point.
Also the names of the functions ... I'm trying to make a point. In real life you would pick a shorter name.
I'm using random user generator to get the JSON data:
http://randomuser.me/
I make a call everytime I click a button, so the zip code I get in return I use it to do a geocoder in google maps API and get a latitude and longitude. Until that it has work very well but I don't know how to use it on Google Maps. I'm trying to create D3 circles and there are two ways to do this:
1.- Using the drawing shapes from Google Maps API:
https://developers.google.com/maps/documentation/javascript/shapes#circles
2.- Using the custom overlay from Google Maps API:
https://developers.google.com/maps/documentation/javascript/customoverlays
I need to do it with the overlay and draw the graphics with D3 like in this example:
http://bl.ocks.org/mbostock/899711
So my doubts are:
1.- How can I use D3 to use the latitude and longitude and load them? In the example they load JSON from the directory but here I'm using remote data. Should I considered a JSON parse or a String or any other?
2.- What is the correct way to write this as a clean code? And why?
Thank you in advance
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/d3.v3.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(16.4706001, -33.6728973),
zoom:3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="button">
<button id="loadbutton">Click to Load</button>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
script.js
var randomuserURL = 'http://api.randomuser.me/';
var myButton = document.getElementById('loadbutton');
myButton.onclick = loadAJAX;
var lat = '';
var lng = '';
var zipcode;
var geocoder = new google.maps.Geocoder();
function loadAJAX () {
$.ajax({
url: randomuserURL,
dataType: 'json',
success: function(data){
zipcode = data.results[0].user.location.zip;
latlng();
}
});
}
function latlng () {
geocoder.geocode( { 'address': zipcode}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
lat = results[0].geometry.location.lat();
lng = results[0].geometry.location.lng();
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
console.log('Latitude: ' + lat + ' Logitude: ' + lng);
}
You basically have everything you need.
There's no need to load a "local" file -- d3.json will take any URL as its first argument. The only problem you may run into are browser security restrictions. In that case JSONP may help.
If your code works for you, it should be fine. Honestly, you have so little code that it really doesn't matter.