Check StreetView availability with Google Maps JavaScript API V3 - google-maps-api-3

I've got a webapp that uses Google Maps JavaScript API V3 to display a regular googlemap and a StreetView side by side. When the map changes position, it tells the streetview to follow it using StreetViewPanorama.setPosition().
However, when I scroll the map to someplace where StreetView is not available, the streetview image stays stuck at the last location. Its getPosition() method returns the same LatLng as the master map.
How can I tell if I have moved to a place where StreetView is not available?

OK, I found an answer, if not the answer.
After each move, use StreetViewService.getPanoramaByLocation() to get the nearest panorama within N meters. Based on that you can stay where you are, move, or setVisible(false).
I used a flag and a setTimer to prevent lots of unnecessary calls to getPanoramaByLocation like this:
var check_availability_lock = false;
var check_availability = function() {
if (check_availability_lock) {
return;
}
check_availability_lock = true;
var availability_cb = function(data, status) {
check_availability_lock = false;
// console.log("status = ", status);
if (status !== 'OK') {
map.setVisible(false);
}
else {
map.setVisible(true);
}
}
setTimeout(function(){
var latlng = map.getPosition();
svc.getPanoramaByLocation(latlng, 50, availability_cb);
}, 2000);
};

Related

Google Maps APIV3 listener set_at not firing until second time

I have the following code, which should trigger an alert when a Polygon shape is changed. This alert only appears after the shape has been changed twice. Meaning, I have to resize the shape two times before the event is triggered.
Any idea as to what may be causing this behavior?
function drawListener(drawingManager) {
var coord_listener = google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
var coordinates = (polygon.getPath().getArray()); //get
var bounds = new google.maps.LatLngBounds();
var people = [];
google.maps.event.addListener(polygon.getPath(), 'set_at', function () { //check to see if the item has been changed //THIS ONLY GETS CALLED AFTER POLYGON HAS BEEN CHANGED TWICE
alert('changed');
});
});
I found my answer: I must use 'insert_at' in addition to 'set_at'
google.maps.event.addListener(polygon.getPath(), 'set_at', function () {
alert('changed');
});
google.maps.event.addListener(polygon.getPath(), 'insert_at', function () {
alert('also changed');
});
Thanks.

Google Maps Service v3: 'ERROR' returned on Geocoding

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.

Google Places API autocomplete not working

Right now, the autocomplete box works just fine when I click on the location, but when I press down, highlight the location that I want to go to, and press enter, it simply goes back to the home location of the map. Any insights on this? I call this function in initialize(). I'm lost as to what I possibly did wrong. Is this just a google api bug? If so, any insights as to how to work around it?
function setupAutoComplete() {
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180));
var input = document.getElementById('placeSearch');
var options = {
bounds: defaultBounds,
types: ['(regions)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
alert('hi');
removeAllOverlays();
var place = autocomplete.getPlace();
var mapCenter = place.geometry.location;
var colLat = mapCenter.lat() - (halfPoints)*latSeparation;
var colLng = mapCenter.lng() - (halfPoints)*lngSeparation;
var tempStart = new google.maps.LatLng(colLat, colLng);
map.setCenter(mapCenter);
pointArray[0][0] = tempStart;
reService();
mapSearch();
drawBounds();
});
}
Thanks so much!
I guess the input#placeSearch is placed inside a <form>.
You submit the form when you press [ENTER].
You may either remove the surrounding form or cancel the submission by adding:
onsubmit="return false"
...to the form-element.
I just hit this issue and went with the following, as I do want to submit the form at a later stage. This code is from google groups.
var input = document.getElementById('create-location');
var options = {
//types: ['(cities)'],
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13)
{
if (e.preventDefault)
{
e.preventDefault();
}
else
{
// Since the google event handler framework does not handle early IE versions, we have to do it by our self. :-(
e.cancelBubble = true;
e.returnValue = false;
}
}
});

Google Maps Marker Drag End Directions - Clear Previous Route

I am using the Google Maps API v3, and I have implemented a directions rendered based on a marker drag end function. But if you drag the marker again then the original set of directions are not removed.
The map is generated based of a geocoding request and autocomplete textbox for source and the destination is static. This all works fine. I have read the API documentation and it says use the .setMap(null); option but it is not clearing the directions, and I believe this is because I am not regenerating the map. My code for the rendering of the directions is below:
google.maps.event.addListener(markersrc, 'dragend', function () {
geocoder.geocode({ 'latLng': markersrc.getPosition() }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var request = {
origin: markersrc.getPosition(),
destination: markerdst.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
directionsDisplay.suppressMarkers = true;
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions_panel"));
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
});
});
Anyone have any idea how I can get the original directions cleared?
It seems to me that each time you drag the marker, you recreate the DirectionsDisplay and DirectionsService. Instead I think you need to create those as global variables, which only get updated by the dragend event listener.

bing map pushpin

when my bing map loads push pin is not visilble.
When i move or click on map it suddenly display pushpin.
i am using custum pushpin with correct path.
Got to the link click on launch satellite on right sidebar green button.A map load.
http://tinyurl.com/3z25amr
my code
function geocodeCallback(result) {
document.getElementById('post-satellite-map-address').firstChild.nodeValue = result.resourceSets[0].resources[0].address.addressLine;
}
jQuery('#post-gallery a[rel="post-gallery-photo"]').colorbox();
(function() {
var icon;
var map = new VEMap('post-satellite-map');
var mapDiv = document.getElementById('post-satellite-map');
var interval = setInterval(function() {
if(mapDiv.attachEvent != undefined) {
clearInterval(interval);
var lat = document.getElementById('post-satellite-map-lat').value, long = document.getElementById('post-satellite-map-long').value;
var position = new VELatLong(lat, long);
map.LoadMap();
map.SetZoomLevel(19);
map.SetCenter(position);
map.SetMapStyle(VEMapStyle.Birdseye);
icon = new VEShape(VEShapeType.Pushpin, position);
icon.SetCustomIcon(document.getElementById('post-satellite-map-icon').value);
map.AddShape(icon);
/*var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', ['http://dev.virtualearth.net/REST/v1/Locations/point?output=json&jsonp=geocodeCallback&includeEntityTypes=Address&point=', lat, ',', long].join(''));
document.body.appendChild(script);*/
}
}, 10);
document.getElementById('post-gallery-satellite').onclick = document.getElementById('sidebar-map-launch').onclick = function() {
jQuery.colorbox({inline: true, href: '#post-satellite-map-overlay'});
map.Resize();
icon.Hide();
icon.Show();
return false;
};
jQuery.get(
WPAjaxURL,
{ action: 'osm_postviews', postID: document.getElementById('post-id').value },
function(views) {
document.getElementById('post-views-count').firstChild.nodeValue = document.getElementById('post-satellite-map-views-count').firstChild.nodeValue = views;
},
'json'
);
})();
Please help me in this issue.
thanks in advance
This is a known issue when in Birdseye view in Bing Maps V6.3. Two options to get around this is to either move the map programmatically a small amount to trigger the redraw of the map, or upgrade to the Bing Maps v7 control

Resources