If you see their Business Photos homepage they have some nice Automated Virtual Tour using Google Streetview.
http://maps.google.com/help/maps/businessphotos/
If you pause the tour and use the controls to move around, you get the nice transitions from spot to spot.
I'm trying to figure out how to do this.
Here is an example of StreetView in their API and it also DOES NOT have the smooth transitions.
https://developers.google.com/maps/documentation/javascript/examples/streetview-events
I need to do this from the Javascript library and not embed an iframe.
Thanks!
Related
I have developed an iOS application that allows the user to drag a GMSOverlay subclass around in the Google Maps SDK. The overlay scales with the map as the user zooms in and out.
I want to replicate this in the browser but can't find examples of how to do it. Today I happened to see a web page where this was done.
Draggable overlay example
If anyone has any ideas about how this is achieved (generally speaking - I will research from there) it would be appreciated!
The Google Maps API zoom_changed event and getZoom() method will let you track changes in zoom, which can be used to scale DOM elements.
My website is based on a map-service. I'm trying to make a login page in which I want to implement the animation in the background to maps just like done in Google's Smarty Pin. But I'm not able to understand how should I animate it?
I have taken some reference from here.
My project is based on Angular 2.
The question posted below
how to rotate a google map in a web application
can be use to rotate the map by rotating the div which contains the map
but if i do scroll or drag on the map the map is working in unpredictably way is there a way to retain those functionalities as it is
Note: i am rotating the map using div because the aerial tiles are not available at that location.
Please say whether this can be done with some other map api are how to go about it in google map API
It is difficult to answer with certainty unless you post a more complete answer, but I believe your issue is with the corrodinate system.
You are rotating the display of the map, but the x,y coordinates of your mouse are not. When you drag the mouse, the javascript is capturing the mouse movement relative to the screen and then you are rotating the output by 45 degrees. In other words, google maps has no idea that you have rotated it. It would be the same output if you just turned your monitor 90degrees, the mouse is still going to send the same x,y coordinates.
In order to do what I think you want you would need to take over the code handling the movement or accomplish it another way. You will notice that the dragging is disabled on the example you referenced.
This might be a place to start looking for getting the center of the map on mouse events:
https://developers.google.com/maps/documentation/javascript/3.exp/reference#MouseEvent
You might be able to get the current coordinates and "transform" the new coordiantes by looking at this example of getting pixels:
https://developers.google.com/maps/documentation/javascript/examples/map-coordinates
Here is a page explaining some things about transforming coordinate systems:
http://www.continuummechanics.org/cm/coordxforms.html
If this is something that you really have to do, it can probably be done, but it is likely a lot more trouble to get right than it is worth for an average map embed. It might also add a lot of processing that will make the interaction pretty laggy.
After saying all that, I'd still love to see an example of this working so if you do make it work please post some code.
im totally new to this, and I need some help.
I need to create an aviation range map. Look at the below link, and in the menu to the left theres a "Range maps".
I started with the Google Maps API Javascript V3, I thought it could be a good base to get rid of Flash.
Now I need some pointers for how I can either add an object to the map or just click in the map and that brings up a circle around the pointer with range for how far the aircraft can go.
I sure hope you understand, and can give me some pointers for how to start. Every tip is appreciated!
http://www.cessna.com/citation/citation-cj4/citation-cj4-performance.html
Sounds like you want a Circle overlay, which is pretty easy to make. The docs have easy examples to follow.
You'll also want an onclick event for each overlay and for the map itself. That way whenever someone clicks on the map or on an overlay, it creates your circle. Check out the events documentation.
how does google maps render the map etc, is it flash a java appelet?
A bit more detail, google maps uses a big div element to contain several img elements. each of those img elements is 256 pixels square, and is positioned on a regular grid. from there, the google maps javascript program calculates which grid images should be loaded into each img tag and uses regular dom manipulation to position each img in the right place. Only the tiles of the map that would be visible inside the div are loaded. when you scroll off the side, the javascript library unloads the image, and loads new ones as needed. Other elements, like the zoom controls, markers, and lines, are stacked or drawn on top of that as needed.
It's all HTML and Javascript, plus a lot of video trucks, satellites (and airplanes?), and google magic.. More information:
How does Google Maps work?
No, it is all based on JavaScript and AJAX.
To oversimply... A small script tag is embedded in the HTML which points to a big .js file over at Google. This contains a whole lot of JavaScript that builds the "map box", downloads the map images, and does things when you move your mouse around and click on stuff.
Google Maps is done via fancy JavaScript if I'm not mistaken. If you don't already have it, install Firebug in Firefox and "Inspect" the map at Google Maps, and you'll see that it's a bunch of images together, with JavaScript to provide the functionality.
It is neither flash nor a java applet. It is simply HTML, CSS and images with a great deal of javascript to drive the interactive elements.
Please see the Google Maps API for instructions and examples on how to create and integrate the google maps widget.
http://code.google.com/apis/maps/