We're trying to implement panoramas to display in Google Maps in the same way as it's showing
This is an example from our website:
For some reason, on our map it does not show possible panorama locations (inside and outside). How can we get them to show there?
Our code is currently this:
<script>
var latitude = <?= $hotel->latitude ?>;
var longitude = <?= $hotel->longitude ?>;
function initialize() {
var fenway = { lat: latitude, lng: longitude };
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
},
fullScreenControl: true
};
var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), panoramaOptions );
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
From the Street View Service documentation, Street View images are supported through use of the StreetViewPanorama object, which provides an API interface to a Street View "viewer." Each map contains a default Street View panorama, which you can retrieve by calling the map's getStreetView() method. When you add a Street View control to the map by setting its streetViewControl option to true.
The StreetViewPanorama constructor also allows you to set the Street View location and point of view using the StreetViewOptions parameter. You may call setPosition() and setPov() on the object after construction to change its location and POV.
Just take NOTE that not all locations has available streetview
image, unless you created a custom one. Here is the link of the list
of currently supported cities for Street View.
For more information, read all the guides that you can find in this documentation and the samples that you can find here.
Related
Post initialization of Maps in street-side view,
we are trying to change the location using map.setview with different location coordinates,
map.setview does not work for a street-side view but works with other views like aerial or birdview.
*** MAP Initialisation ****
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
center: new Microsoft.Maps.Location(40.7060179,-74.0110099),
mapTypeId: Microsoft.Maps.MapTypeId.streetside
});
*** Change Location ****
Below code does not work
map.setView({
mapTypeId: Microsoft.Maps.MapTypeId.streetside,
center: new Microsoft.Maps.Location(37.027222, -121.0225),
});
same code works when changed to aerial
map.setView({
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center: new Microsoft.Maps.Location(37.027222, -121.0225),
});
Streetside imagery is only available for locations along the roads AND where the street side data has been collected before. It looks like the location you passed in does not have Streetside imagery which is why the call is failing. Also if you created the map in Streetside, and your intention is to stay in Streetside but to move to a different location, you don't have to pass in mapTypeId again.
To sum up, using a location close to yours:
// Create map - same code as yours
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
center: new Microsoft.Maps.Location(40.7060179,-74.0110099),
mapTypeId: Microsoft.Maps.MapTypeId.streetside
});
// Switch to a different location in Streetside
map.setView({
center: new Microsoft.Maps.Location(37.031969, -121.022367)
});
I am using the Gmap API to display a Google Map with a transitLayer. I am trying to improve the PageSpeed of my website. One of the things that would help is if I could load the transitLayer AFTER the Google Map is initialized. I have created a fiddle in which the Google Map is initialized with the transitLayer. Is it possible to add the transitLayer AFTER the google map is initialized?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 51.501904, lng: -0.115871}
});
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
}
I am not sure what do you mean saying AFTER the google map is initialized. I suppose you can use one of the events defined for the Map class, for example tilesloaded or idle.
https://developers.google.com/maps/documentation/javascript/reference#Map
So, the code might something like
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 51.501904, lng: -0.115871}
});
google.maps.event.addListenerOnce(map, "idle", function() {
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
});
}
I am mapping 20k records from Google Fusion table using standard circle. I would like to group them using MarkerClusters. Because there is filtering and search occuring, I am not sure where to place the var markerCluster = new MarkerClusterer(map, markers); code.
Here is the map.
Code snippet where markers are created:
//*New Fusion Tables Requirement* API key. found at https://code.google.com/apis/console/
//*Important* this key is for demonstration purposes. please register your own.
googleApiKey: "AIzaSyDj8qostHt2L3aetpO_LuipyS6YvfeZOFA",
//name of the location column in your Fusion Table.
//NOTE: if your location column name has spaces in it, surround it with single quotes
//example: locationColumn: "'my location'",
locationColumn: "geo_coordinates",
map_centroid: new google.maps.LatLng(40.7127,-74.0059), //center that your map defaults to
locationScope: "new york city", //geographical area appended to all address searches
recordName: "result", //for showing number of results
recordNamePlural: "results",
searchRadius: 805, //in meters ~ 1/2 mile
defaultZoom: 13, //zoom level when map is loaded (bigger is more zoomed in)
addrMarkerImage: 'images/blue_pin.png',
currentPinpoint: null,
initialize: function() {
$( "#result_count" ).html("");
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: MapsLib.defaultZoom,
center: MapsLib.map_centroid,
mapTypeId: google.maps.MapTypeId.TERRAIN,
};
map = new google.maps.Map($("#map_canvas")[0],myOptions);
map.setTilt(45);
map.setOptions({ styles : styles });
// maintains map centerpoint for responsive design
google.maps.event.addDomListener(map, 'idle', function() {
MapsLib.calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(MapsLib.map_centroid);
});
MapsLib.searchrecords = null;
I have a problem with google maps. When i firstly embeeded iframe to my page on ipad i saw buttons like streetview under the map. When i switched maps to be generated from system data, and rendering using javascript api buttons are gone?
Is there a way to show them again, is it just an options that needs to be added to map or buttons only work when using iframe?
var map;
var service;
var infowindow;
function initializeMap() {
var slocation = new google.maps.LatLng(x,y);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: slocation,
zoom: 15
});
var infowindow = new google.maps.InfoWindow({
content: 'example content'
});
var marker = new google.maps.Marker({
position: slocation,
map: map,
title: ' example title'
});
infowindow.open(map, marker);
}
the buttons that i want to achive are http://imageshack.us/photo/my-images/43/buttonsuv.png/
In your code, add this option streetViewControl: true
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: slocation,
zoom: 15,
streetViewControl: true
});
Have a look at this, it summarises all of the street view options.
UPDATE
After the question update, I realise you want your custom image on the street view icon.
That's not possible.
One workaround is to define a custom control on the map, and link events to it with the streetview events.
I've never done it, however you might want to have a look at this
I'm using the Google Map V3 Javascrpt API to embed a Google Map. When a user goes into street view on the embedded map how do you move the rotation controls to the right side. I've tried setting up these options when creating the map:
rotateControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
However, when in street view the rotate controls remain on the left? Is there a way to position the rotate controls when in street view to the right side?
Yes, you can place the controls in other positions, but the solution is a little tricky.
You can set the streetView controls position in a StreetViewPanoramaOptions. The problem is that you can pass the options object to the StreetViewPanorama object only in its constructor. Therefore you have to create a default StreetViewPanorama object, that is not visible (otherwise the streetview panorama would be loaded instead of the map). The StreetViewPanoramaOptions would be:
var streetViewOptions = {
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
visible: false
};
Create the StreetViewPanorama in the same div as the map:
var street = new google.maps.StreetViewPanorama(document.getElementById('map_canvas'), streetViewOptions);
Add streetView option to the map options:
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetView: street
}
Create the map:
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);