How do I transition to Street View from Normal View and vice-versa just by zooming in/out and not involving Pegman in the process?
So far, it seems the only way to transition between the two views is by placing the Pegman on the map - to enter Street View and clicking on the Cross button on the top-right - to exit Street View. I want to make the transition to mimic that of maps.google.com. Any ideas?
Thanks!
This is the example from the api for street view.
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map-canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
map.setStreetView(panorama);
Then use an event handler for the zoom case.
Hope that helps :)
Related
Small problem.
So, i'm working with the google maps api for a small project at my internship.
This is how I make my map.
function initMap() {
window.map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 62.323907, lng: -150.109291},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage ='https://developers.google.com/maps/documentation/javascript/';
srcImage += 'examples/full/images/talkeetna.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
The problem I have is the next: I want to determine the zoom, I tried this with:
var zoom = window.map.getZoom();
alert(zoom);
This works! But the only problem I have, this always shows me '12'. And I want to get the current zoom level, after zooming in or out and that doesn't seem to work, it always keeps displaying '12'. How can I fix this?
It is quite simple add a "zoom_changed" listener for your map and get the current zoom of the map
The code can be like
map.addListener("zoom_changed", function() {
alert("Zoom :" + map.getZoom());
});
Pretty simple implementation of Google Maps on AngularJS. The following code works perfect on my desktop using FireFox. However, on my android this code leaves the old marker after I click to change positions. I can drag around the map and "wake" it up. The data behind the map is correct but it just won't refresh the marker overlay. Can I force it to refresh? Am I doing something wrong?
$scope.mapOptions = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.setMarkerPosition = function($event) {
$scope.marker.setPosition($event.latLng);
}
$scope.$watch('myMap', function(map) {
if (map) {
$scope.marker = new google.maps.Marker({
map: $scope.myMap,
position: myLatlng
});
}
});
I am not seeing any reason why the zoom controls are not showing up as the controls are not disabled in my option? this is v3 google map..has anyone faced similar issue? I can zoom in and out using mouse scroll button or touchpad scroll of laptop..but the icons +/- would be great!
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(42.095287, -79.3185139);
var myOptions = {
maxZoom: 12,
//zoom: 9,
//center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
You have to use zoom and also center properties to display your map correctly, here is a jsfiddle of a map constructed with your options.
http://jsfiddle.net/5ytkx/9/
Remove the comments before zoom and center properties
zoom: 9,
center: latlng,
Could it be because your myOptions variable includes a trailing comma?
mapTypeId: google.maps.MapTypeId.ROADMAP,
Will it work if you remove that?
Hope this helps
Could you try this?
mapTypeId: google.maps.MapTypeId['ROADMAP']
How can I toggle Streetview on an specific map canvas by clicking a button (API v3) ?
function ToggleStreetView(map)
{
//Assume map contains the google.maps.Map object
}
This is the function that I wrote for a maps app that I wrote a while ago:
// Toggles between map and panorama view
function togglePanorama(){
if(isPanorama){
map.streetView.setVisible(false);
$('#message').empty().append('Click here to take a tour of our office.');
isPanorama = 0;
} else{
map.streetView.setVisible(true);
$('#message').empty().append('Back to the map.');
isPanorama = 1;
}
}
Though I was using it with a custom panorama it will work just fine with the default Street View.
Get the 'streetview' of your map then setVisible to 'false' and your streetview should no longer be visible.
// map would be map instance
map.getStreetView().setVisible(false);
I assume you are using Javascript version 3 API from google maps
here is a sample code
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
if you lool carefully you can see line of code
mapTypeId: google.maps.MapTypeId.ROADMAP
you can declare our map variable and than iinside your function change its MapTypeId
I've found custom Google Maps icon images that can be laid out as a sprite (matrix of small pics). I effectively want to create custom icons which are numbered 1-10 (for my 10 results per page) and also have mouseover effects (change color).
I'm not sure how to do this. The relevant code is the following:
$('.entries').each(function(index){
var entry=$(this);
latlng[index]=new google.maps.LatLng($(this).attr('data-lat'),$(this).attr('data-lng'));
marker[index]=new google.maps.Marker({
position:latlng[index],
map:map,
icon:image_url
});
if(marker[index]){
marker[index].setMap(map);
}
Even if I can't make it a sprite (which seems unlikely right now) I'd like to change the icon on mouseover.
I've tried to do so and created a hack that SORT of works. The problem here is that the map flickers occassionally when reset. Is there a better way?
google.maps.event.addListener(marker[index],'mouseover', function(){
entry.addClass('map-hover');
// alert(marker[index].icon);
marker[index].icon='{{site}}media/map-icons/iconb'+(index+1)+'.png'
marker[index].setMap(map);
});
google.maps.event.addListener(marker[index],'mouseout', function(){
entry.removeClass('map-hover');
marker[index].icon='{{site}}media/map-icons/iconr'+(index+1)+'.png'
marker[index].setMap(map);
});
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(mapDiv, {
center: latLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
This code might help you to get an idea about placing custom markers.