Two different panoid for the same photosphere Google Maps API JS - javascript

i would appreciate some help in understanding why there are two different panoId patterns on Google StreetView.
I'm initializing photospheres with the following JavaScript code:
function initialize() {
var pocetneKoordinate = new google.maps.LatLng(44.81856295912351, 20.455767810344696);
var pocetniPanoID = 'F:-By57yDKJr5M/WWfMHHWwYjI/AAAAAAAACXU/v1tk1TK02yEmBWGt2U4sMK1d_Uf3qdKmwCLIBGAYYCw';
var mapOptions = {
center: pocetneKoordinate,
zoom: 0
};
var map = new google.maps.Map(document.getElementById('panorama'),
mapOptions);
panorama = map.getStreetView();
var panoOptions = {
position: pocetneKoordinate,
pano: pocetniPanoID,
visible: true,
pov: {
heading: 41,
pitch: 0,
zoom:1,
},
clickToGo: false
};
panorama.setOptions(panoOptions);
// Create a StreetViewService object.
var streetviewService = new google.maps.StreetViewService();
}
Just in case I pasted something wrong, working JSFiddle https://jsfiddle.net/markovica/pcLjbmwk/
It all works great, but what confuses me is that I open the same panorama with two different PanoID strings, ex:
CAoSLEFGMVFpcE1EZGhWWFJzVzBTd0I4amlQOWtjdEJ3Z3MwVnYtNTZBbEJNRHBI
F:-By57yDKJr5M/WWfMHHWwYjI/AAAAAAAACXU/v1tk1TK02yEmBWGt2U4sMK1d_Uf3qdKmwCLIBGAYYCw
Besides that, on other linked photospheres, panorama.getPano() will return the pattern of the initial pano, and links are not exactly the same (Screenshot showing differences in links) - there are some slight differences which I suppose are due to my recent edits.
But why are there two panoIDs for the same panorama and why are they behaving slightly different?

The correct way of retrieving PanoID is by querying StreetView Publish API. It will give the first pattern.
I used the API explorer:
https://developers.google.com/apis-explorer/#p/streetviewpublish/v1/

Related

Set extent of view in OpenLayers 3

I've just started having a look at OpenLayers 3 and am attempting to zoom to a single feature whose extent is to be a geoJSON object sent by the server (which will change at each refresh, so I can't hard code the zoom/central point). I would like this to happen preferably as soon as the page loads, but I'm struggling to get it to work.
I keep getting an error saying "Uncaught TypeError: undefined is not a function" at the line where I try to read the geometry from a geoJSON object, and I'm not really sure how to fix it. The geoJSON string seems fine (i've also tried parsing it before passing it to readGeometry but that gave the same results).
If there's an easier/faster way to do this than how I am currently, i'd be interested to hear it too!
Any help is greatly appreciated.
var feature = new ol.Feature({
});
var view = new ol.View({
center: [0, 0],
zoom: 1
});
var client = new XMLHttpRequest();
client.open('GET', 'http://localhost:3000/extent');
client.send();
client.onreadystatechange=function(){
if (client.readyState==4 && client.status==200){
var geomstring = client.responseText;
console.log(geomstring)
var geojson = new ol.format.GeoJSON();
var geom = geojson.readGeometry(geomstring);
var size = (map.getSize());
feature.setGeometry(geom);
view.fitGeometry(
geom,
size,
{
padding: [170, 50, 30, 150],
constrainResolution: false
});
}
}
var map = new ol.Map({
layers: [raster, vector, feature],
target: 'map',
});
Reading the geometry should work like this:
var geojson = new ol.format.GeoJSON();
var json = {"st_asgeojson":"{\"type\":\"Polygon\",\"coordinates\":[[[-2416.91312435933,6700304.87650272],[-2416.91312435933,6700339.02584392],[-2255.97853651961,6700339.02584392],[-2255.97853651961,6700304.87650272],[-2416.91312435933,6700304.87650272]]]}"};
var geom = geojson.readGeometry(json['st_asgeojson']);
console.log(geom.getArea());

Google map load more than 1000 markers browser not responding

I am new to Google maps, I am plotting the gps data onto a Google map, it works fine up to 500 points. If the data exceeds more than 500 it slows down is there any alternate way to plot markers onto a map.
I am just marking the gps data in Google map on certain time period.
Later I need to plot hundreds of thousands of gps data in Google map,below method slows down and exit the firefox or chrome (it times out).
How to plot more data on google map and also it should be fast
My javascript code, sale data will be of json data:
function show_map_all_data(sale_data)
{
init_map();
var count_actual=sale_data.length;
var locations=[];
for (var i=0;i<count_actual;i++)
{
var temp=[]
temp.push(sale_data[i]['GPS_latitude'],sale_data[i]['GPS_longitude'])
locations.push(temp);
}
//console.log(locations);
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
icon: {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#8e2014',
scale: 4,
strokeOpacity: 1.0,
strokeWeight: 10,
fillColor: '#8e2014',
animation: google.maps.Animation.DROP,
},
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0] + "," + locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
You'll likely need to look into markerclustering in order to speed up your page load times (and avoid time out). Multiple markers rendered on the client side is probably the downfall of many mapping applications performance wise. It is difficult to benchmark, fix and in some cases even establish there is an issue (due to browser implementation differences, hardware available to the client, mobile devices, the list goes on).
The simplest way to begin to address this issue is to use a marker clustering solution. The basic idea is to group geographically similar locations into a group with the number of points displayed. As the user zooms into the map these groups expand to reveal individual markers beneath.
Perhaps the simplest to implement is the markerclusterer library. A basic implementation would be as follows (after library imports, and not reflective of your code, this is just the simplest example I could come up with):
<script type="text/javascript">
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < 100; i++) {
var location = yourData.location[i];
var latLng = new google.maps.LatLng(location.latitude,
location.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The markers instead of being added directly to the map are added to an array. This array is then passed to the library which handles complex calculation for you and attached to the map.
Not only do these implementations massively increase client side performance but they also in many cases lead to a simpler and less cluttered UI and easier digestion of data on larger scales.
Other implementations are available from Google.
Edit to answer comment
If you look here: http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/docs/reference.html and look for a property called maxZoom you can set a zoom level in the clusterer options object after which the clustering will be turned off to allow all markers to be plotted.

New Google Maps Symbol object in Marker makes IE really slow

I'm testing the new Symbols object of the Google Maps V3 API. I have set every "icon" attribute of 400 markers with the same Symbol path and color.
When look at the sample page with Firefox or Chrome, everything loads fast and works great.
Unfortunately... the performance in Internet Explorer are really bad. Bad at loading time and also when I try to drag or zoom on the map.
Here is a simple javascript example which you can use to test on IE
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}
function addMarkers() {
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 400; i++) {
var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: latLng,
icon:{
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
strokeWeight: 0,
scale: 4
},
map: map
});
}
}
When you use it with some extra attributes and events it gets worst! But if you just delete the "icon" attribute of the marker, the basic Google marker appear and everything goes as fast as Chrome and Firefox...
Does anybody have an answer why this is that slow on IE when using Symbol and how can I speed up the process.
Thanks!
The symbol icons on Google Maps are part of the new VectorIcons. These are no bitmaps, but are described as vector paths in SVG format. These are basically paths with a lot of points that get drawn until the shape is completed.
Now you have a lot of icons, which means a lot of SVG paths that have to be drawn. When you see different rendering speeds in different browsers, you are basically comparing the SVG rendering engines of the browsers - and from your application it looks like IE9 is slower than the other browsers.
I don't think there is a method to speed this up. You could either reduce the number of shown markers (for example with clustering) until you get to an acceptable rendering speed. Or you could simply use the Bitmap icons.

FusionTables query not returning anything

I'm trying to use Javascript to query a specific state so that only that state appears as a Fusion table on a Google Map. Here is the Javascript that doesn't work:
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
map = new google.maps.Map(document.getElementById('map_canvas'), { center: chicago, zoom: 4, mapTypeId: 'roadmap'});
var layer = new google.maps.FusionTablesLayer(531237, { query:"select geometry from 531237 where state_abbr = 'IL'"});
layer.setMap(map);
If I remove the where clause from the query, all states are returned...as expected. Anyone know what I'm doing wrong when all I want to do is grab the single state?
Turns out that the columns need to be the exact case. Here's the working code:
var layer = new google.maps.FusionTablesLayer(531237, { query:"select geometry from 531237 WHERE STATE_ABBR in ('AL', 'WI', 'CT') "});

Multiple markers not showing in Google Maps with Javascript API v3?

I'd like to know how to put multiple markers for Google Maps using Javascript API v3.
I tried the solution posted here, but it does not work for me for some reason:
var directionDisplay;
function initialize() {
var myOptions = { zoom: 9, center: new google.maps.LatLng(40.81940575,-73.95647955), mapTypeId: google.maps.MapTypeId.TERRAIN }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, properties);
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
];
function setMarkers(map, buildings) {
var image = new google.maps.MarkerImage('map_marker.png', new google.maps.Size(19,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
var shadow = new google.maps.MarkerImage('map_marker_shadow.png', new google.maps.Size(28,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
var bounds = new google.maps.LatLngBounds;
for (var i in buildings) {
var myLatLng = new google.maps.LatLng(buildings[i][1], buildings[i][2]);
bounds.extend(myLatLng);
var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, title: buildings[i][0] });
google.maps.event.addListener(marker, 'click', function() { window.location = ('detail?b=' + buildings[i][3]); });
}
map.fitBounds(bounds);
}
}
</script>
Could anyone kindly explain why this doesn't work for me?
This question is already a few months old, but I noticed that it remained unanswered. I guess the OP already found a way through this, but let me attempt an answer for the sake of completeness.
I can spot a few major problems in your code above:
First of all, you are trying to pass the properties array to the setMarkers() function, before properties is defined. Therefore setMarkers() will receive undefined for the second argument, which is why nothing is showing on your map.
Then, you are having a very common closure problem in that for in loop. Variables enclosed in a closure share the same single environment, so by the time the click callback from the addListener is called, the loop will have run its course and the i variable will be left pointing to the last value it had when loop ended.
In addition, you have a dangling comma in the array literal, which can cause a syntax error in some browsers.
To fix the first problem, simply define the properties array before calling setMarkers():
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
];
setMarkers(map, properties);
You can then solve the closure problem with even more closures, using a function factory:
function makeClickCallback(buildings, i) {
return function() {
window.location = ('detail?b=' + buildings[i][3]);
};
}
for (var i in buildings) {
// ...
google.maps.event.addListener(marker, 'click',
makeClickCallback(buildings, i);
}
This can be quite a tricky topic, if you are not familiar with how closures work. You may to check out the following Mozilla article for a brief introduction:
Working with Closures
Then you may want to make sure to remove the dangling comma in your array literal:
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'] // no comma
];
In addition, note that since there is just one element in your properties array, you will only get one marker on the map. I'm not sure if the other elements were removed for the sake of this example, but if it wasn't, simply add more locations like this:
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
['Another Location',50.505050,-75.505050,'Mjg5']
];

Categories