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);
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)
});
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.
I use jquery.ui.map to load markers on google map, and this is part of my code:
var ip = new google.maps.LatLng(lat, longt);
var mapOptions = {
zoom: 4,
center: ip,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$('#map_canvas').gmap(mapOptions);
var marker = $('#map_canvas').gmap('addMarker', {
'position': ip,
'bounds': true,
'title':'Your location'
});
While the map is loading I can see the markers, but when everything are loaded the markers disappear and no marker is shown on the map, while we have them, if you take a look at this screen shot you will see that we have the marker (because we can see the marker title when we hover on it) but we cannot see it...
Screen shot: http://s15.postimg.org/5zlsbxwhn/scmap.jpg
The Demo page: http://bev.dev.beardo.co/encontre/
You have to use marker.setMap(map)
I have a nice example on github
Hi so I'm working a google maps element into an app I'm writing and am having trouble dropping a pin on the user's current location.
I can get the map to load a fusion table layer of pins, and center on the user's current location, but I'd like to be able to then drop a marker at the user's current location, and resize the map to fit all the markers. Is this possible? If not I can just set the zoom to an appropriate level.
This is the code I'm working with:
var geocoder = new google.maps.Geocoder();
function initialize() {
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng([app:user-lat], [app:user-lon]),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col2, col0",
from: "1pbba_dFcpWQKQDXQUt9RNXp16GqX5Jz-NraafEI",
where: ""
},
options: {
styleId: 3,
templateId: 3
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I should also say that the [app:user-lat] and [app:user-lon] calls are application specific, taking data from the mobile device, and will work to insert the current user's location. This is the reason I'm not doing a call for the current position through google maps api, thanks in advance for anyone taking the time to help.
To place a marker at the user's position, add this after you define your map:
var marker = new google.maps.Marker({
position: new google.maps.LatLng([app:user-lat], [app:user-lon]),
map: map
});
If you want to move it as the user moves, that will be a little more complicated, keep a reference to it and use marker.setPosition.
function initialize() {
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng([app:user-lat], [app:user-lon]),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng([app:user-lat], [app:user-lon]),
map: map
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col2, col0",
from: "1pbba_dFcpWQKQDXQUt9RNXp16GqX5Jz-NraafEI",
where: ""
},
options: {
styleId: 3,
templateId: 3
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
To center the map on the markers (or zoom the map to show them all, you will need to query the FusionTable for all the markers, construct a google.maps.LatLngBounds object from their locations, then use that as an argument to map.fitBounds.
Here are a couple of examples that do that (but with a different column layout (two column location) than your table. The concept can be adjusted for your column layout (query for the single column location, parse it to create a google.maps.LatLng and add it to the google.maps.LatLngBounds):
http://www.geocodezip.com/v3_FusionTablesLayer_centerOnMarkers.html
http://www.geocodezip.com/www_vciregionmap_comC.html
example that zooms and centers the map on the data in your table. Notes:
The GViz API that is used is limited to 500 rows, if you have more data that that you probably don't want to do this anyway.
The maps is centered on the data not the user.
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