Google Maps API v3 - Display Image capture date in StreetView - google-maps

When you visit maps.google.com there is an information at the right bottom corner saying when the image has been captured:
screenshot google maps
However on my site when I use Google Maps API, that information is simply not shown. I cannot find any setting for this either.
Does anyone know how to display that information?
EDIT:
I don't use google.maps.StreetViewPanorama, but google.maps.Map where the user can switch to StreetView mode.
Thanks!

When you create the Street View, specify the imageDateControl attribute in the options. It's disabled by default; you have to enable it.
Something like:
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: yourLocation,
imageDateControl: true
});
See:
https://developers.google.com/maps/documentation/javascript/3.exp/reference#StreetViewPanoramaOptions

I was able to set the options by getting the StreetView object from the map:
this.map = new google.maps.Map(this.divContainer, defaultMapOptions);
this.map.getStreetView().setOptions(defaultStreetViewOptions);

Related

New Google Maps query string syntax for a marker

In my web page code, I used to have a link to open a new window with Google Maps initialized like this:
http://maps.google.com/maps?q=loc:{{lat}},{{long}}&z=14
and it was showing a marker.
With the new google maps, this syntax does not work completely, as the zoom level is not taken into account. So I found out that this was working:
http://maps.google.com/maps/#{{lat}},{{long}},14z
But in this case I don't have a marker anymore.
Question: With the new syntax, how to get a marker at the specified position? Also, I could not find a Google web page documenting the syntax. Is there one?
Thank you
Try this is in the format you need. The first with marker the second without
https://www.google.com/maps/place//#46.090271,6.657248,16z
https://www.google.com/maps/#46.090271,6.657248,16z
you must add the place/ between maps/ and /#

infoWindow that fills up map

Does anyone know how to create a custom Google Maps infoWindow That will just open and fill over the map completely, instead of paning the map and setting the bubble over the marker? Basically, what I'd like to do is have my markers on the map, then when a user clicks on a marker, it just opens the content in a panel that fits the entire map itself. I looked at the options mentioned here: link but none of these seem to do what I'd like, they still open a "bubble" type of window. Has anyone done this or can someone point me in the right direction?
Creating your custom info window is not so difficult, but it's a little bit complicated.
If you want to find the easiest way, I recommend InfoBubble library.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
If you want to just prevent map panning when the infoWindow open, you can specify an option:
var infoWnd = new google.maps.InfoWindow({
disableAutoPan : true
});

How to update Bing Maps or Google Maps dynamically, depending on the address given to it

On a project I'm building, I want the user to be able to select an address which is stored in the database, and then click on that address to view more information. When the user clicks on the link, it will take them to another page which will display more information, as well as a Map of the address.
What I want to do is get the map to locate the address dynamically, instead of using a pre-defined embed link. But I'm not entirely sure if what I want to do can be done, and if it can be done I don't know how to do it.
So essentially, I want to know how I can take the address from the database, and pass it to the embedded map on my project?
It doesn't really make a difference to me if Bing or Google is used.
Cheers!
Yes what you want can easily be done. Both Bing Maps and Google Maps offer geocoding services, where you give the service an address, and the services returns as part of its results longitude and latitude coordinate of the address on the map. I could paste a bunch of code here but you can find all the code sample you need for both maps in my links above.
When the user clicks on your address link, you bring them to your detailed information page. On that page, you will have javascript to set up your map. In addition to the javascript setting up your map, you will need more javascript, detailed in the links above, to call the geolocation services. In essences, you pass to the services the address you want to look up, and if the address is valid the service will return to you the longitude and latitude coordinates of that address. Using this information, you can then zoom to that location on the map, and optionally put a pushpin there to indicate the address.
See here for an example in google maps.
Interactive SDK of Bing Maps Click on REST Services -> Find a location by query.
I am assuming you are interested in the ajax version of the map controls, but the other versions should be quite similar and should work more or less the same.
You can always do something like this:
<div id="location"></div>
<script type="text/javascript">
function initialize() {
var gpLatlng = new google.maps.LatLng(latitude, longitude);
var gpOptions = {
zoom: 15,
center: gpLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("location"), gpOptions);
var marker = new google.maps.Marker({
position: gpLatlng,
map: map,
title:"Title"
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize&region=GB";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>

Show google map marker depending on what zoomlevel you're on

I'm wondering if it's possible to set markers to be visible in a chosen zoom level for the
Google Map API v3.
I figured it's possible in the v2 of the API using the "Marker Manager" but can't find a way for the latest API.
Example:
Marker-1 -> (max_zoom:10, min_zoom:5) //will on be shown within zoom level 5-10
Marker-2 -> (max_zoom:15, min_zoom:10) //will on be shown within zoom level 10-15
As I'm developing an jQuery-plugin I only want to use the original API without add-ons.
Thanks in advance!
Supposing map is the object instanced to manage the gmap, i'd do something like this:
var zoomLevel = map.getZoom();
if (zoomLevel>=5 && zoomLevel<=10) {
// call the setMarker function for the marker1
} else if (zoomLevel>10 && zoomLevel<=15) {
// call the setMarker function for the marker2
}
Maybe u want to handler the zoom change event, if so look at this: http://code.google.com/apis/maps/documentation/javascript/events.html
You can use Marker Manager with API v3. The examples in http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/ use the most recent Maps API and they seem to work just fine.
For other options, like Marker Clusterer and Fusion Tables, see http://code.google.com/apis/maps/articles/toomanymarkers.html.
You can also do it by checking the zoom level and adding/removing markers from the map based on that, as suggested by #lucke84 in their answer.

InfoWindow replacement for Google Maps v3

I'm looking for an InfoWindow replacement for Google Maps v3. I want to use it for popping up on marker mouseover. The standard InfoWindow is wholly unusable because it pans and makes itself a nuisance. Google Maps v2 had the excellent GxMarker (doesn't work with the new API): http://code.toeat.com/gxmarker.html
Does anyone know of a similar plugin for Google Maps v3, or other ways to work around the bossy behaviour of InfoWindow?
In the InfoWindow options you can disable the panning by setting disableAutoPan to be true, you can read more on the reference page.
But there is also a InfoBox utility library that can be found here
http://econym.org.uk/gmap/ebubble.htm was what I used for V2 and when you glance at the code you can see it's fairly simply and may work with V3 if altered slightly.
Hope it helps.
var infowindow2 = new google.maps.InfoWindow({
disableAutoPan: true
});