How to integrate a smaller map into a larger map - javascript

I am trying to integrate an area which I have created as it's own map onto a larger map.
I would like to show the location of this organization on a map with it's surrounding areas. When I zoom in onto the area of the organization, the details/layout of the smaller map(layout through the organization) should become visible.
With the map I have created, it is places on an image with outlines of certain buildings and stores (it's a mall), I am able to calculate distances among other operations. I just need to figure out how to implement zooming in to reveal my smaller map on this larger map. This map will be displayed on a website as well as integrated on a native mobile application, such as an android app, however implementation on the webpage is more important.

The Google Maps API provides map tiles at various zoom levels for map type imagery. Most roadmap imagery is available from zoom levels 0 to 18. The MaxZoomService object provides a simple interface for discovering the maximum zoom level at a given location.
Accessing the MaxZoomService is asynchronous, since the Google Maps API needs to make a call to an external server. For that reason, you need to pass a callback method to execute upon completion of the request. This callback method should process the result.
To initiate a request to the MaxZoomService, simply call getMaxZoomAtLatLng(), passing the LatLng of the location and a callback function to execute upon completion of the request.
Here are related SO ticket which discuss Maps API zoom range: google map API zoom range / Using setZoom() after using fitBounds() with Google Maps API V3

Related

Google Earth embebed, create grid layout in Satellite view

I'm working currently in a project where we need to create a new feature that allow to the user zoom in a Google Earth map embedded in a web app, and create a grid layout over the map, so the user should be able to "mark" some elements of the maps, for example, some specific buildings etc. But we need to create kind of square around the element, so it is not a single point, but at least 3 or 4 as needed to round the element.
We need to save those elements map with its coordinates and assign an ID to every element of the created grid.
Is it that possible? Is there a JS library that I could use?
Google Earth does not currently make an API or embedding available. If you don't need the full 3D view, then you can do this with the Google Maps API. There is a "drawing" library available that you can use to draw objects on the map. More info here:
https://developers.google.com/maps/documentation/javascript/drawinglayer

About billing about map movement on Maps Javascript API

I need to include google map in my website for assignment purpose.
I understand that charges will occur with a count of loading the map. If you move multiple markers using PanTo, PanBy, or setCenter methods, will they be charged (counted as 1 count)?
If you’re using the JavaScript Maps API and creating the maps with google.maps.Map() then panning scrolling zooming don’t generate more loads.
You’ll be charged per map load.
More information here

Here Map Javascript API turn by turn navigation

I am developing a HTML5 app where needs to show vehicle location according to coordinate and also the route(list of received customised coordinates) on the map in real time. Coordinates received via third party device.
I have tried leaflet library, google map, but didn't find a way to rotate/adjust the map(inside a div) according to the heading(the future coordinates).
The requirement is to have the vehicle icon always on the bottom center of the page and the route/heading points upwards. Similar to navigation apps. Any people know if it's possible in Here map Javascript API? Is it called turn by turn navigation?
There is a new release of the JS API planned which will provide this kind of scenario.
Please watch out for the JS API API release 3.1 on developer.here.com (roughly estimated by the end of May)

Google Maps, how to show distance and travel time in the map

I have used the directions service to render a route on Google Maps. I managed to show the distance and travel time on a marker via the response object which contains the data. But how do I show the information on hover on the blue polylines?
For example:
I have been unable to find this feature in the documentation, but my customer is saying he had this feature in his old website (which is offline, not available anymore).
Is this feature still available in Google Maps? And if so, where are the docs located for this particular feature? Is there another another solution?

embedded google map change center or zoom

I have an embedded Google map (the kind you get an embedded iframe for using the Google maps site) with multiple markers on it. This is good so far as it goes but I need another function.
What I want to do is allow a person visiting the page to change to centre point by entering their postal code. I'd like them to also be able to change the zoom factor.
While there is massive amounts of documentation on using Google maps and on using the Google maps API, what I'm missing is a way to use the existing embedded Google map rather than creating a new blank map and populating it with markers.
The difference is important because it's quite easy to use the Google maps site to upload a .csv file with names and addresses that the Google map sorts out and displays. Doing the same thing with a blank map and javascript each time the page is loaded runs you up against the API transaction limits.
How can I tell the Google map API to connect to an embedded map instead of creating an empty one?

Categories