Google Earth embebed, create grid layout in Satellite view - javascript

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

Related

Building a completely custom map in React Native?

I'm currently trying to create an app to help route users while they're inside an enclosed location like a mall or a school. I've built up a framework to generate maps of these locations and exported them as images. I was planning on using these images as the map to display on the frontend to somehow draw routes on the images to guide the user. I just can't think of a simple way to do this.
I've seen react-native-maps but that just seems to use the standard Google maps view and doesn't let me use a custom map to draw routes on. Is there any way to accomplish this?
Depending on what level of detail you want, you might be able to do this with an overlay or custom map tiles.
You can overlay your map over google maps using the overlay layer on react-native-maps. If this amount of detail is not enough, you could try creating a tile server to get images or use vector tiles with MapBox maps(which also has some nice react-native bindings).
As for drawing routes, it should be straightforward by using a poly line layer. You'll have to calculate the paths beforehand and draw them using a poly line.

Leaflet js fictional map

I am new to Leaflet and I would like to find out if how to create a fully interactive fictional map. I have an image that I would like to convert to a leaflet map. This image has a number of connections and points like a graph basically.
I want to first of all convert that image to the map, be able to hover over the points, highlight them and display information about them and also to create animations at some point but not immediately with the connections. There is also a requirement to display permanent labels next to each point.
Is that at all possible in Leaflet?
Is that at all possible in Leaflet?
Yes.
Start by reading the leaflet tutorial for non-geographical maps.

How to overlay a floor plan onto a Map (Google Maps JavaScript API)?

I'm attempting to create a map of a building using the google maps javascript API. I have the actual map itself set up, but I want users to be able to view inside the building using a custom made floor plan that I would overlay on top of the building. The idea is that users can look at the map and get an easy to use view of the inside of the building. How would this be done?

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?

Dynamically create markers in OpenLayers 3

I'm developing an application that loads lots of markers in OpenLayers 3.
However, I would like to dynamically display and load markers while user is panning at a certain zoom level.
Could someone provide me an example, or directions to do that?
For instance, I would like to first create an example that drops a marker where user has clicked on the map.
So, with this information, I will be able to handle the rest and post my solution here.
I've managed to create a way for setting this up:
http://weebah.com/weebah_examples/click_to_create.html

Categories