Background: I have just finished a course on Udemy called The Web Development Bootcamp. The main project for this course was to create a web app called Yelpcamp, which is essentially a campsite rating and discussion site. You can see the current working version of my app here: https://radiant-eyrie-76078.herokuapp.com/. It is built using node and express.
Problem: I would like to add a map to each campground showing where it is in the world. When a user adds a campground they will put in a location in a form and I need to take that location and convert it to latitude and longitude. I am using mapbox to add the map and I was able to get a simple map added to each campground. I now need to figure out how to take the input from the user and geocode it (convert it from a name to an exact location). Mapbox has a geocoding api, but I cannot figure out how to use it in this way. It seems that it can only be attached to the map directly.
Question: How can I take this location user input and geocode it so that it can be used by my mapbox map?
The Geocoding functionality of Mapbox does not require the presence of a map, and be called from the SDKs directly. That is, the input text of the geolocation can be user-provided or come from anywhere else (say, a DB, or a preexisting list of places).
Since your app is Node-based, you probably want the forwardGeocode function of the Geocode API in the JavaScript SDK.
Related
I'm working on creating a dynamic map of the factory at which I work. I would like to create a map that can zoom in and out with different elements that will populate depending on the zoom level. I can't find any tutorials that DON'T involve using some sort of maps API to just create a quick maps app. I want to use my own images, my own elements, but with the basic functionality of Google Maps, and I'd like to use React if I can.
Where can I go for this? It's difficult to find anything that talks about the basic "tile structure" coding logic of a zoomable web app that will render different images (in my case would be the "zoomed" images of the same factory) depending on the zoom level. Thanks, any help helps
Recently I am working on a mobile app project which has been developed back in 2016.
Around 4500 users are currently using it.
It was developed using AngularJS (v 1.7.8) and IONIC (V1.1.1). We have to stick with these older version for now.
It has a google map feature.
It is done by first calling "geocode" funtionality of google map java script API and then we use "ui-gmap-google-map" directive from "angular-google-maps 2.2.1 to render the map.
Now it started giving error.
We have to use google map API_KEY now.
To get the geocode the app is making a call to this google map API.
https://maps.google.com/maps/api/geocode/json?address=
Now we have to append an API_KEY in the URL to make it work.
After getting geocode (lat and lng), we used to pass it to "ui-gmap-google-map" angular directive ("center" attribute) in the view to render the map. I am guessing this "ui-gmap-google-map" is internally making calls to google map service and passing the geocode and then render the map.
The map which is being displaying is covered with gray color and water mark "For development purpose only".
Now here the question is, how I can pass the same API_KEY to "ui-gmap-google-map" ?
Please help or show me some direction.
Thanks a lot.
Bibhudatta
You should switch to angularjs-google-maps
If you need to pass in an API key to the javascript, you can set a scope variable in your controller (e.g. $scope.googleMapsUrl="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE";). This can be set from a constant value in your app to standardise the API key to pass to google for multiple controllers.
1st question:
I am trying to use the map component from codename one Theme. However, every time i put longitude and lattitude, it resets to 0.0. How can i change that from inside the theme?
2nd question, if possible: How do i show permissions, in order to enable using your own location? It is automatic when I use the map component, but not for other components.
When i try to use web view with google map, it does not let me put my own location.
You are using the old GUI builder which is no longer maintained. I would recommend switching to the new GUI builder or using handcoding. Notice you might be better off starting a new project as the new GUI builder is VERY different.
MapComponent is also deprecated in favor of native maps those are accessible from code and are far superior on the device... The Uber clone app was built using native maps.
Location prompts are automatic when you use the LocationManager API. You can enable them in the simulator to see how it feels on the device. You can then use the JavaScript interop to pass your location to embedded HTML.
Here is my question, and afterwards I'll give some context.I'll try add as much info here to help.
Is it possible to render a JPG from a Angular implementation of Google Maps with dynamic waypoints?
Context:
We currently have an angular implementation of google maps that allows us to turn on and off waypoints from a GUI. Turning off a route, hides that from the map.
There are various settings that can be changed in the GUI that dictates where the waypoints will go and therefore the route.
The purpose or objective outcome is to be able to take a JPG of that map configuration and embed in email, attach, send to customer etc etc
UPDATE: I should note that we have considered building the static map through the API directly by appending waypoints to the URL, however we need to use our custom styled map overlay.
Any help or guidance would be most appreciated.
Thanks everyone!
I have informations about some objects stored in BigTable(coordinates and few more) and I have to put this objects on Google map. How can I do that? (Please write some code example. I am using java for my application).
Working with Google Maps requires some background knowledge. I suggest starting here: http://code.google.com/apis/maps/documentation/index.html. I would imagine that you'll use your server-side code to generate javascript from your objects in BigTable, which gets rendered in the client web pages and adds the markers to the map.