How can I use any map (Google, Mapbox, etc.) without an API key to only render the map via React Native (expo) on phisical device? - google-maps

I need to just show the map on my physical device without any functionality, but each map library needs an API key or something like that, maybe someone knows any use cases for any map library for simplicity? thx!

You need an API key if you want to use the map services.
Alternatively, if you just want to point to a given pleace and display a map showing that place:
Go to the map website with your browser (make sure to have the place you want in the middle of screen)
Grab the address (url) from the browser
In React Native, use an instance of a Webview targeting the URL just copied.
The Webview inside your app will render the map as your browser does.

Related

How do I use stamen maps with the static google maps api?

I'd like to be able to use the stamen maps watercolor layer in conjunction with the static maps api from Google.
I'm hoping this is simple but I'm not sure how to implement it...
A static maps URL looks something like this:
https://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=12&size=400x400&sensor=false
And the Stamen maps information is here:
http://maps.stamen.com/#watercolor
Thanks a lot for your help!
If you go to this page you'll see that you can center on an area, select the map style and the image size, and then press the "MAKE" button. This will generate a static image which you can then reference.
Stamen doesn't offer a static maps URL you can use to generate maps from a lat/lng pair, like Google does. If this is for a one-off map, you'll be fine. Otherwise, it doesn't seem like you'd be able to easily (see below) dynamically generate static map images.
P.S. If you're really really interested, you could take a look at the page's JavaScript source and see that by calling generateExportURL(), you'd get the URL to start a server-side rendering of a static watercolor map. You'd then need to poll that same URL (using (for instance) a server-side proxy, as cross-domain restrictions won't allow you to poll this page from your JavaScript source) to check when the map's "status" changes from "not_started" to "finished"... :-)

Max url length with Google Maps static image

I need to create a static image of google map with several markers, and each marker has a custom icon.
In the Api DOC there is the note: Static Map URLs are restricted to 2048 characters in size. In practice, you will probably not have need for URLs longer than this, unless you produce complicated maps with a high number of markers and paths.
The url is very long.... There is the position for each marker and the URL for the custom icon for each one.
I've already tried with POST request ma it is not supported.
There is another way to create a static map image without max length limitation?
A possible way might be this, but i don't know if is it possible: I've create my custom map using the function in GMaps, and i have added all the markers i need.
There is a way to access in static way to this particular map? so in the url i have to give only the center of the map and other parameters (zoom, ...), but all the markers are already positioned.
Or... another idea... Can i submit the URL of a KML with all markers positioned instead each single marker position+icon url?
FYI, Google recently updated the limit to 8192.
Have you tried using a URL shortener for the icon urls? I believe the static map API will respect services that make URLs shorter... might save you a few characters.
You might wanna check out toopola´s API to help working with Google Static Maps, I am about to make my own attempt.
Another idea
find map area that contains all the markers
divide the map area into rectangular pieces (4 pieces for example)
create image url for each part, but include in url only markers and icons visible on map
show images
Мethod of division depends on the markers position.
Yes, you can definitely do this with the Javascript API.
I have built a few applications using that API. It can be a little tricky to get your head around, but it is pretty good. For what you want to do, it would not be too difficult. If the user has to be able to interact with the map and add pins and such, it starts to get a little more complicated because you have to capture clicks and such.
Does the map its self need to be available as a URL, or does it just need to be embedded on some page and that URL can be used?
The Javascript API will work best if you can embed the map into an existing webpage.

Current Location in Google Maps using only a URL

So I would like to use a URL to retrieve and display ONLY the users CURRENT LOCATION.
For example: A user with a smartphone (iPhone, Android, etc) opens a link [http://maps.google.com/CURRENTLOCATION] on their phone, and it shows their current location on the user's device in either Google Maps app or browser, as reported by their GPS/wireless location. The actual link itself should should remain static, and display the location wherever they are.
Is this possible?
Thanks in advance!
If you have the lat/long coordinates (which I suppose you get through the gps/wireless device), you can use something like this:
http://maps.google.de/maps?q=loc:48.0000,9.000
which opens the Google Maps website with the coordinates N48.0 E9.0 (as decimal coords) centered.
Or, if you need a static map (and not a full fledged JavaScript map), use this link and adjust the values inside the URL:
http://maps.google.com/maps/api/staticmap?center=48.00,9.00&zoom=14&size=512x512&maptype=roadmap&markers=color:blue|48.0,9.0&sensor=true
Valid values for the arguments are:
for maptype: roadmap, terrain, satellite
for zoom: 1 to 20
This is discussed front and center in the Google Maps geolocation API: Detecting the User's Location
According to the documentation, the user will need using an HTML5 equipped browser for this to work. You will need to write the Javascript which looks pretty vanilla.
Edit: This only works if you are using your own domain and have implemented the Maps API (which is really simple), not Google's own maps.google.com

How could a share a Google map mashup with my own datapoints and links back to my site?

I currently have a map mashup that has locations that I'm populating from my own database. A few users would like to also show that map on their site(s). I'd like to give them the ability to do that, but would like to retain the actual functionality of the map on my own site: like add "stuff" to places on the map through my a web form on my site. I could open the entire API to allow them to create their own form along with the data points, but most of the people wanting to put up the map aren't developers, they are just enthusiasts that have put together a personal page that they want to spice up.
I was thinking I could just provide a JavaScript of some kind that they could then take to place on their site, or maybe an IFRAME of some type, or...any ideas? Anyone implemented this? TIA.
I haven't done anything like this myself, but I think your idea to utilise an iframe is on the right track. In fact, this is how Google Maps generates its embed code.
Your app will need to generate a URL with all relevant Google Map parameters such as bounds, zoom level as well as your application-specific params. Any event that triggers the map to re-draw (drag, zoom, etc.) will generate a new URL.
If you try the embed link in Google Maps as an example, it generates a URL that looks something like this:
http://maps.google.com/maps?f=q&source=s_q&sll=45.434035,12.339057&sspn=0.003294,0.004812&ie=UTF8&ll=45.432724,12.338966&spn=0.006588,0.009624&t=h&z=17
This URL can then be wrapped up in an iframe which your end users can place on their web pages.
Re: resizing
Yes, it's possible to dynamically resize it if width/height is part of your application params that generates the embed code. Again using Google Maps as an example:
<iframe
src="http://maps.google.com/maps?f=q&source=s_q&sll=45.434035,12.339057&sspn=0.003294,0.004812&ie=UTF8&ll=45.432724,12.338966&spn=0.006588,0.009624&t=h&z=17&output=embed"
width="(width-param)" height="(height-param)"></iframe>
If you mean resized by user, after it's been displayed, I'm not sure.. most likely, yes.

Do i need use google maps api only to embed litle map with route calculator/display for only one destination?

Well i want to upgrade contact page with dynamic map showing location and give oportunity to calculate route for comapny headquatters. Id it necessery for such simple task use Google api? i mean here generating akey etc? Fo i have any other alternatives to google maps?
There's really no reason to mess with the API at all unless you need to customize the appearance or behavior of gmaps. Why not just use an iframe with a url of:
http://maps.google.com/?q=[you-url-encoded-address-here]
or better yet, set up a textbox and a 'get directions' button to redirect that frame to:
http://maps.google.com/maps?saddr=[their-address]&daddr=[your-address]
edit: this works well in modal dialog if you don't want the google logo sticking out like a sore thumb in your pageflow
You could probably embed directly with a specific URL that will configure it to have the destination you want.
By the way, well written answers are much more likely to receive useful responses here.
You could consider http://www.openlayers.org/ as an alternative to google maps.
In fact open layers can be used to add a Google map, or an OpenStreetMap map or a Bing map, etc.