If you go to http://maps.google.com and zoom in until Google runs out of map the viewer automatically transitions to Streetview-mode (at least if Streetview is available at the location you zoomed in on).
I'm mucking around with the Google Maps v3 API. Is there a way to replicate the map-to-streetview effect here? I can enable Streetview just fine by putting streetViewControl: true in the mapOptions, but the user still has to manually drag the stickman onto the map to get Streetview going.
This will open a panorama at the map center:
var G = google.maps;
var svpContainer = document.getElementById('svp'); // Make sure this div exists
var svp = new G.StreetViewPanorama(svpContainer);
G.event.addListener(map, 'zoom_changed', function(){
var z = map.getZoom();
var center = map.getCenter();
if (z > 15) {
svp.setPosition(center);
svp.setVisible(true);
}
});
Tested over Dallas, TX. Make sure you have a div with id 'svp'
Related
I have converted multiple shapefiles to KML using the Shp2kml2 software from Zonums Solutions. I have made a map with the KML layers (of which I have imported to google docs to get the url). As an example:
var ctaLayer = new google.maps.KmlLayer({
url: 'https://docs.google.com/uc?authuser=0&id=0B15UI5xGYTOadDlta2FoZ2pCc1E&export=download'
});
ctaLayer.setMap(map);
When I click on a polygon layer in google maps, the pop-up box opens. How can I make it so that when I click on a second polygon layer, the pop-up box that was selected earlier is automatically cleared and not shown anymore? (Because in my situation, the earlier pop-up box still shows up but I don't want this to happen because if the user selects multiple polygon layers, there would be too many pop-up box on the screen. I understand that the user can select X to delete the pop-up window but I would like to make it as user-friendly as possible).
In addition to the polygon layers, I have other point layers in the map. But when I try to click on a specific point, the pop-up information is that of the polygon which rests in the same place as the points.
My map is found in: http://userpages.flemingc.on.ca/~catam/collab.html
You could consider the following approach:
1)suppress a default info window:
var kmlOptions = {
suppressInfoWindows: true, // do not to display an info window when clicked
preserveViewport: false,
map: map
};
var layer = new google.maps.KmlLayer(url, kmlOptions);
2)register a shared instance of Info Window:
var infoWindow = new google.maps.InfoWindow();
var openInfoWindow = function (KMLevent) {
infoWindow.close();
infoWindow.setOptions(
{
content: KMLevent.featureData.infoWindowHtml,
position: KMLevent.latLng,
pixelOffset: KMLevent.pixelOffset
});
infoWindow.open(map);
};
google.maps.event.addListener(layer, "click", openInfoWindow);
Example
Is it just me or does the google maps api seem to be on the quirky side?
Trying to simply show a marker for some coordinates, and then center the screen on the marker.
In my controller fired from a view:
onGoogleMapRender: function (googleMap) {
var long = record.get("Longitude");
var lat = record.get("Latitude");
var pos = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
position: pos
});
marker.setMap(googleMap);
googleMap.setCenter(marker.getPosition());
googleMap.setZoom(14);
}
It seems to place the marker in the center of the screen but when I return and show the same screen the 2nd, or 3rd time, the marker is added but this time the marker doesn't get centered.
Has anyone got this working correctly? I don't suppose it is any ST2 related but more a quirk of the google api.
You have to center it with a small timeout, than it will work fine.
setTimeout(function() {
googleMap.panTo(marker.getPosition());
}, 100);
I don't know if it's a bug, but this way is shown in the showcase.
I'm implementing an application in which I have to show google map with circle at the center of the map. I'm able draw a circle on map but after few seconds I've to update the circle's radius. I want to use same instance of map rather than creating new one.
When i create the new circle its overlapping on older circle. I want to remove previously added circle and show new one.
While checking the api I got this method from Circle class which will hide the circle.
myCity.setOptions({visible:false});
but the problem is I don't have access to older circle instance.
Is there any way which will allow me to get maps markers and infoboxes assigned to that map and remove them?
Below is method which will get called interval of few seconds
function mapByCoordinates()
{
var lat=document.getElementById("latValue").value;
var lng=document.getElementById("lngValue").value;
var accuracy = document.getElementById("zoomValue").value;
var zoomVal=getZoomBasedOnAccuracy(accuracy);
var zm = parseInt(zoomVal);
var tempRadius = getRadiusBasedOnAccuracy(accuracy);
var amstr = new google.maps.LatLng(lat,lng);
var mapProp = {
center:amstr,
zoom:zm,
mapTypeId:google.maps.MapTypeId.HYBRID
};
map.setOptions(mapProp);
myCity.setOptions({visible:false});
infobox.close();
myCity = new google.maps.Circle({
center:amstr,
radius:tempRadius
});
marker=new google.maps.Marker({
position:amstr,
});
myCity.setMap(map);
myCity1.setMap(map1);
infobox = new google.maps.InfoWindow({
content:"Welcome to google map",
disableAutoPan:true
});
infobox.open(map,marker);
map.panTo(amstr);
map.setZoom(19);
}
Thanks
We can make the already drawn circle invisible on google maps by using following method
circle.setOptions({visible:false});
and can null the instance of that map.
Try circle.setRadius(radiusvalue)
Google Maps javascript API question - Map object recenters after applying KML layer. How do I prevent this?
I created a simple page with a map. When I apply a simple polygon KML, it recenters and zooms the map. Any ideas?
var myOptions = {
center: new google.maps.LatLng(27, -97),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml');
buildings.setMap(map);
//i tried this to recenter and zoom, but no dice.
var posn = new google.maps.LatLng(27, -97);
map.setCenter(posn);
map.setZoom(17);
Sounds like you need the preserveViewport option. From the documentation:
By default, the input map is centered and zoomed to the bounding box of the contents of the layer. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.
Pass it a KMLLayerOptions object through the constructor:
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml',{preserveViewport:true});
I used this code but its not working.
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(10.35,79.4167), 13);
var marker = new GMarker(new GLatLng(10.35,79.4167));
map.setCenter(new GLatLng(8.7167,77.483), 14);
var marker = new GMarker(new GLatLng(8.7167,77.483));
map.setCenter(new GLatLng(21.83,78.75), 15);
var marker = new GMarker(new GLatLng(21.83,78.75));
map.addOverlay(marker);
map.setUIToDefault();
}
}
Your code will only add the last marker. You are only calling addOverlay once at the end (so only the last marker will be added to the map).
You also call setCenter multiple times, so only the last setCenter will be applied to the map. setCenter just sets the visible area on the Google Map.
You are using Google Maps v2 in your code, I suggest you check out the more current v3 API. If you are starting a new project, you may as well use the latest stuff.
If you have some other reason for using the v2 API, there is a range of good samples to get you started.