I am using google maps geocoder to geocode a zipcode and I want it to return the state that the zipcode is located in and store it in the variable "local". I am getting an error indicating that local is undefined. Why?
see code below:
var address=document.getElementById("address").value;
var radius=document.getElementById("radius").value;
var latitude=40;
var longitude=0;
var local;
geocoder.geocode( { 'address': address}, function(results, status){
if (status==google.maps.GeocoderStatus.OK){
latlng=(results[0].geometry.location);
latitude=latlng.lat();
longitude=latlng.lng();
//store the state abbreviation in the variable local
local=results[0].address_components.types.adminstrative_area_level_1;
}
else{
alert("Geocode was not successful for the following reason: " + status);
}
});
I think the issue is actually that address_components will likely have more than one component, and the order isn't necessarily the same for all zip codes. So you have to iterate through the results to find the correct one.
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function test()
{
var address=document.getElementById("address").value;
var local = document.getElementById("local");
var latitude=40;
var longitude=0;
geocoder.geocode( { 'address': address}, function(results, status)
{
if (status==google.maps.GeocoderStatus.OK)
{
latlng=(results[0].geometry.location);
latitude=latlng.lat();
longitude=latlng.lng();
//store the state abbreviation in the variable local
for(var ix=0; ix< results[0].address_components.length; ix++)
{
if (results[0].address_components[ix].types[0] == "administrative_area_level_1")
{
local.value=results[0].address_components[ix].short_name;
}
}
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</head>
<body>
<input type='text' id='address' value='84102' />
<input type='text' id='local' value='' />
<a href='#' onclick="test();" >try</a>
</body>
</html>
Where are checking value of the variable local? I haven't seen it in your code sample.
If out of the callback function, then nothing weird. Request to the geocoder runs asynchronously. So it could be undefined even after you run the request. You need to put code which works with variable local into callback function.
Related
I m using google maps api v3. This is my code
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://maps.googleapis.com/maps/api/js?
v=3.exp&sensor=false&libraries=places"></script>
<script>
var geocoder;
var map;
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
//var latlng = new google.maps.LatLng(18.52043030000, 73.85674369999);
var mapOptions = {
zoom: 15,
//center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function codeAddress() {
var address = document.getElementById('searchTextField').value;
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'searchTextField': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
alert(latitude);
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
I m doing all this in wordpress template file. I m displaying suggestion using autocmplete places. I want that when user select one of the location from suggestion list, map should navigate to that place. It's not going into the if condition i.e. if (status == google.maps.GeocoderStatus.OK) {
This is html code
<input id="searchTextField" type="textbox">
<input type="button" value="Geocode" onclick="codeAddress()">
If you run this code you will see you have an error that says:
InvalidValueError: unknown property searchTextField
Geocoder accepts 'address' as a property among others, but no 'searchTextField'.
So just change:
geocoder.geocode( { 'searchTextField': address}, function(results, status) {
to:
geocoder.geocode( { 'address': address}, function(results, status) {
In my website I have two panel, left side is for adrress and right side is for google map.
I want to load a google map once I click a particular address without page refresh.
Please help me.
You should implement this via Javascript, the algorithm will be something like this:
Show a map based on a default location (e.g. your city and adequate zoom level to this)
a form with a textbox to search and address
An event on click on a "search button" to geocode and get a lat,lon for that address
Re-set via Javascript the center of the map based on the geocode service response
add a marker on location returned from geocoding service.
hope this helps
PD How are you querying the map with the panels right now ?
Geocode the address here is the link on how to go about it
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests
then do this
map.setMap(latLng)
where map is your global map object
and latLng is co-ordinates obtained from geocode library
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {zoom: 8,center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
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);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else
{
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<input id="address" type="textbox" value="New Delhi, India">
<input type="button" value="Geocode" onclick="codeAddress()">
Look, I'm using Google Maps JavaScript API v3. The user fills in an address and I show the streetview of that address. Everything's fine (a lot of locations work perfectly), till a enter a location like "Laken". It just displays grey, nothing else. I want to prevent the user from continuing to the next page with a grey image instead of a google maps streetview.
When I fill in Laken, the getPanoramaByLocation() function returns status == "OK", because it has found something, but its not a visible image, it's just grey. How can I prevent the API from doing this? Something like, when you can't display this location(is grey), display the next available location nearby.
Here's an extract from the code:
Function:
<script type="text/javascript">
//this is a standard location that I show when te user starts
var map;
var huis_lat,huis_lng;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
//SAVE HOMELAT&LONGT
$('#geocoding_form').submit(function(e){
var address=document.getElementById("address").value;
e.preventDefault();
GMaps.geocode({
address: $('#address').val().trim(),
callback: function(results, status)
{
if(status=='OK'){
var latlng = results[0].geometry.location;
huis_lat=latlng.lat();
huis_lng=latlng.lng();
verander(huis_lat, huis_lng);
document.getElementById("div_overlayStart").style.display="none";
document.getElementById("div_overlayThuis").style.display="block";
}
else if(!address) //no address
{
alert("fout?")
document.getElementById('alarm1').innerHTML = 'FILL IN ADDRESS';
}
else if(status=='UNKNOWN_ERROR')
{
document.getElementById('alarm1').innerHTML = 'UNKNOWN ERROR!';
}
else if(status=='ZERO_RESULTS')
{
document.getElementById('alarm1').innerHTML = 'UNKNOWN ADDRESS!';
}
}
});
});
});
</script>
HTML:
EX: Fill in: Kongingslaan 1, Laken
<body>
<form method="post" id="geocoding_form">
<div class="input">
<input type="text" id="address" name="address" />
<button type="submit" class="linksSocial" style="border: 0; background: transparent">
<img src="images/btn_job.png" width="231" heght="36" alt="submit" />
</button>
</div>
</form>
</body>
Function verander():
<script type="text/javascript">
function verander(google_lat, google_lng) {
var bryantPark = new google.maps.LatLng(google_lat, google_lng);
var panoramaOptions = {
position:bryantPark,
pov: {
heading: 185,
pitch:0,
zoom:1,
},
panControl : false,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false ,
linksControl: false,
addressControl:false,
zoomControl : false,
}
map = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);
map.setVisible(true);
}
</script>
Use google.maps.StreetViewService.getPanoramaByLocation() to determine if there is a panorama available for the given location.
Quick and dirty solution. I noticed resizing the Window worked for me on this problem. And it also worked if you fire the event via js.
window.dispatchEvent(new Event('resize'));
Try this :
$(document).ready(function(){
var map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
//SAVE HOMELAT&LONGT
$('#geocoding_form').submit(function(e) {
e.preventDefault();
var address = $('#address').val().trim();
if(!address.length) {
$('#alarm1').html('Fill in your address!');
}
GMaps.geocode({
address: address,
callback: function(results, status) {
if(status !== 'OK' || results.length == 0) {
$("#div_overlayStart").show();
$("#div_overlayThuis").hide();
}
if(status !== 'OK') {
$('#alarm1').text('Something went wrong!');
}
else if(results.length == 0) {
$('#alarm1').html('No results found!');
}
else {
$('#alarm1').text('');
var latlng = results[0].geometry.location;
verander(latlng.lat(), latlng.lng());
$("#div_overlayStart").hide();
$("#div_overlayThuis").show();
}
}
});
});
});
I also had problems with StreetView displaying 'grey' at some locations.
I don't like the solution given here.
Have a look at my solution in another post, which is also to do with StreetView being displayed 'grey' at some locations -->
Google maps streetview tiles do not load in Firefox initially, only after dragging
This solves the problem:
<script type="text/javascript">
var map;
var huis_lat,huis_lng;
var richting = 0;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
//SAVE HOMELONG/LAT IN VAR
$('#geocoding_form').submit(function(e){
var address=document.getElementById("address").value;
/* STATUS
OK The request was successful.
UNKNOWN_ERROR The request could not be successfully processed, yet the exact reason for failure is unknown.
ZERO_RESULTS There are no nearby panoramas.
*/
//CHECK IF ADDRESS IS VALID (IS THEIR A VALID X/Y COORDINATE FOR IT?)
e.preventDefault();
GMaps.geocode({
address: $('#address').val().trim(),
callback: function(results, status)
{
if(status=='OK'){
var latlng = results[richting].geometry.location;
huis_lat=latlng.lat();
huis_lng=latlng.lng();
verander(huis_lat, huis_lng);
document.getElementById("div_overlayStart").style.display="none";
document.getElementById("div_overlayThuis").style.display="block";
}
else if(!address) //no address
{
document.getElementById('alarm1').innerHTML = 'Gelieve u adres in te vullen!';
}
else if(status=='UNKNOWN_ERROR')
{
document.getElementById('alarm1').innerHTML = 'Er ging iets mis (onbekende fout)!';
}
else if(status=='ZERO_RESULTS')
{
document.getElementById('alarm1').innerHTML = 'Er is van deze locatie geen streetview beschikbaar!';
}
}
});
});
});
//+1 one for the array results[richting].geometry.location
function verhoog(){
var address=document.getElementById("address").value;
richting++;
//e.preventDefault();
GMaps.geocode({
address: $('#address').val().trim(),
callback: function(results, status)
{
if(status=='OK'){
var latlng = results[richting].geometry.location;
huis_lat=latlng.lat();
huis_lng=latlng.lng();
verander(huis_lat, huis_lng);
document.getElementById("div_overlayStart").style.display="none";
document.getElementById("div_overlayThuis").style.display="block";
}
}
});
}
</script>
Check if the panorama (streetview) for these X/Y coordinates is visible (not grey). I use the function getPanoramaByLocation to determine this. This returns a status like the previous one. If there are ZERO_RESULTS (=grey zone) it activates the function verhoog() that increments the array of results by 1.
<script type="text/javascript">
var map;
function verander(google_lat, google_lng) {
var bryantPark = new google.maps.LatLng(google_lat, google_lng);
//CHECK FOR GREY ZONE
var client = new google.maps.StreetViewService();
client.getPanoramaByLocation(bryantPark, 50, function(result, status) {
if (status == "ZERO_RESULTS") {
verhoog();
}
else if(status == "OK")
{
var panoramaOptions =
{
position:bryantPark,
pov: {
heading: 185,
pitch:0,
zoom:1,
},
panControl : false,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false ,
linksControl: false,
addressControl:false,
zoomControl : false,
}
map = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);
map.setVisible(true);
}
else if(status=='UNKNOWN_ERROR')
{
alert("Er ging iets mis");
}
});
}
</script>
I've got a Google Maps widget working on an .xhtml page served by a JSF2 project in Java. The map displays, and I have a function for adding markers that works just fine. However, any attempt to use Geocoder seems to result in the returned status of 'ERROR'. Google Maps API mentions no such error status amongst its five possible candidates for return values of the 'status' variable.
Followng is a .js file deployed, and the offending function in question is codeAddress(). Similar code to codeAddress() works elsewhere online that I can find, so it must be something to do with the circumstances under which its being called. Given that the map displays just fine, and I can place markers, my expectation is that my session is just fine. This leaves me puzzled :( Does anyone know what 'ERROR' could come from??
var map;
var marker;
var geocoder;
function placeMarker(location) {
if (!marker) {
marker = new google.maps.Marker({
position: location,
map: map
});
} else {
marker.setPosition(location);
}
map.setCenter(location);
var field = document.getElementById("portCreate:coordinate");
field.value = "POINT (" + location.lat() + " " + location.lng() + ")";
}
function initialize() {
var mapOptions = {
center : new google.maps.LatLng(55.761123, 13.084717),
zoom : 5,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("map"), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
setMarker(document.getElementById("portCreate:coordinate"));
geocoder = new google.maps.Geocoder();
}
function setMarker(field) {
if (field.value) {
var regex = /POINT.+?([-0-9\.]+).+?([-0-9\.]+)/;
var matches = regex.exec(field.value);
placeMarker(new google.maps.LatLng(Number(matches[1]), Number(matches[2])));
}
}
function codeAddress(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
} else {
alert("Geocode was not successful for the following reason: " + status + "\nFor address " + address);
}
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=<API key here>&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
After having this same problem today I've remembered that instead of doing a link to the API I downloaded the code as .js. After changing it to a link it works agains. I think Google updates the script regurlaly, if it had any version conflict they return the ERROR status.
The documentation for javascript/geocoding shows 'ERROR' as a possible result:
"ERROR" indicates that the request timed out or there was a problem contacting the Google servers. The request may succeed if you try again.
I had the same problem. I was working with ASP .Net application. After I changed the ASP .Net button control to HTML input Button, it is working now. Not sure where the problem is.
<input type="button" value="Geocode" onclick="codeAddress()">
I was troubleshooting a similar issue, where I was able to recreate the ERROR status by canceling the google API http request before it returned a response.
I want to use the google map api v3 like in this example https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple
but without this input field
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
I want to specify the street address for example "75 wall st, new york" directly in the code. How do I do this? Below is the code from that sample url. Anyone know what needs to be removed/added to this?
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
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);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map-canvas" style="height:90%;top:30px"></div>
I would imagine you could update the function to do this:
function codeAddress(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
And once you want to update the map, just call:
codeAddress('75 wall st, new york');
If you're using jQuery you could put this in your document ready function, or in another part of your code.