
With Google Maps Platform products and some help from the Google developer community, Banton built his map in just a few days, compiling the data and adding richer details in his spare time.
#Google maps api software#
Posted by Simon Banton, “Hengemaster,” Stonehenge Barrow MapĮditor’s note: Today’s post comes from Simon Banton: software professional, Stonehenge enthusiast, and creator of the Stonehenge Barrow Map. As the popularity of urban foraging grows, I hope that we can organize ourselves to cultivate increasingly more food-bearing (rather than just decorative) plants in our cities. Over half of the world’s population lives in urban areas: We want them to realize that there is edible bounty ready to be harvested, just down the street or around the corner. We’re excited that Falling Fruit is helping to reimagine cities as a source of food. Once you start looking for food-bearing plants in your city, you’ll realize that you’ve been surrounded by them all along. Tasks like converting between map coordinates and addresses now run automatically in the background, which frees up time that we can devote to other projects – like adding new features to the mobile app, importing new city tree inventories, and partnering with nonprofits with similar missions, such as Community Fruit Rescue. The APIs’ accurate documentation also helps us run Falling Fruit more efficiently. The Google Maps Platform credit covers the usage cost as we attract more users to Falling Fruit. With help from Google, we can continue to use the Maps APIs without stretching our small budget too thin. The interactive maps on our website and mobile apps are built using Google Maps Platform, helping us create the bridge between our users and the large amounts of data we collect on food-bearing trees, plants, and other foraging opportunities.

We created Falling Fruit to help people recover food that would otherwise go to waste. But there is fresh food ready for picking on our city streets if you know where to find it. We don’t typically think of cities as places to forage for food. Falling Fruit was able to access Google Maps Platform through Google for Nonprofits to build its global map.  Learn more about the products and resources available through Google for Nonprofits. Falling Fruit’s global map marks locations in 111 countries, and its website and mobile apps have been accessed by nearly 1 million people. With the Google Maps JavaScript API, you initialize a new map like this: const map = new (document.getElementById('map'), ,Ĭonst infowindow = new by Ethan Welty, Co-founder, Falling FruitĮditor’s note: Today’s post comes from Ethan Welty, Co-founder of Falling Fruit, a nonprofit that helps city dwellers harvest for food in their neighborhoods. In this step, you will initialize a map on your webpage. Using your access token associates your new map with your Mapbox account.
#Google maps api code#
Set your access tokenįind mapboxgl.accessToken in the code and set its value to your own Mapbox access token, as described in Getting started. It also creates a element with an id of 'map' that will be the map's container. This code imports the Mapbox GL JS JavaScript library and CSS file so your map can use Mapbox GL JS functionality and styles. Mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN' Paste the following code into the file to set up the framework for a webpage with a map.Open your text editor and create a new file called index.html.Use the text editor of your choice for writing HTML, CSS, and JavaScript. Mapbox GL JS is a JavaScript API for building web maps. Your Mapbox access tokens are on your Account page. To complete this tutorial, you will need: This guide assumes that you are already familiar with the Google Maps JavaScript API V3 and with front-end web development concepts including HTML, CSS, and JavaScript.
