In this article, I will show you how to drop a pin in Google Maps from your phone or computer.

How to Drop a Pin on Google Maps (Mac or Windows)

Step 1: Sign into your Google Account

Step 2: Click on the Google apps icon and go to Maps

Step 3: Search for a location using the search bar

Step 4: Click on the pin icon next to the location you want to save

You should see a red pin icon on the location in the map.

How to drop a pin manually

Go to any location on the map and click on the icon next to the location you want to save.

You should then see a red icon next to the location.

How to save the location

Once you pin a location, then click on save.

Then you can choose which list you want to save your pinned location to.

Then you should see it marked as saved.

To find all of your saved locations, click on the menu icon and then click on Your Places.

Then you can click on the list where the location was saved to.

How to share a location

Click on the Share icon under the pinned location.

Then you can choose where to share your pinned location.

How to remove a pin

You can click on the X in the search bar.

How to Drop a Pin on Google Maps (phone)

If you haven't downloaded the Google Maps app on your phone you will need to do so.

Step 1: Open the application and search for a location

Step 2: Click on the location and you should see a red pin on the map

How to drop a pin manually

On the map, go to your location of choice and press and hold your finger down on that location.

You should then see a red pin appear next to the location.

To save your location, scroll through the options and click on Save.

Click on the list where you want to save it.

How to share your pinned location

You can find your pinned locations at the bottom of the app.

Then click on the share icon at the top of the screen.

Choose the method for sharing your pinned location.

How to remove a pin

To remove a pin, then you can click on the x in the search bar.

Taking inspiration from a culinary great

If you’ve seen the Pixar movie Ratatouille, you should know who Chef Gusteau is. He helped our “little chef” Remy the rat navigate the culinary world and become the top chef of Paris.

Remy from Ratatouille overlooking Gusteau's in Paris

Throughout the movie, we get a lot of great quotes on their journey. But the one we're interested in here is Gusteau’s motto, and the title of his book, “Anyone can cook!” So how can we apply this and the lessons to our own mapping journey?

I’ll admit, part of the fun here was translating some of the lessons learned from one of my favorite movies, but there’s a lot to take in here. I'm going to walk through some examples and types of maps that should get you motivated to get started with your own mapping application. So let’s dive in!

Get inspired by learning about maps and the impact they have on the world

Food always comes to those who love to cook. - Chef Gusteau

Through my work, I’ve found it easy to fall in love with working on maps. Every day, scientists use maps to visualize data that can assist them in making more effective decisions. This directly translates to benefitting people all around the world and saving lives.

With this inspiration, you'll be taken on a journey to learn more about the different types of maps in this world and how they’re being used. You even might stumble upon some interesting data that explores your own neighborhood!

Active fires around the world

Take for instance NASA’s FIRMS service, which provides a realtime look at active fire data around the world.

Active fires around the world via NASA FIRMS

Fires are a real-world example of disasters that we can learn from. This tool is used to help manage resources for stopping and preventing those fires by allowing scientists and those that are curious to analyze burn areas and model the data itself.

Global cases of COVID-19

And something very current, cases of COVID-19 (Coronavrius) around the world by Johns Hopkins Center for Systems Science and Engineering.

Global cases of Coronavirus (COVID-19) from John Hopkins CSSE

This map tracks the spread of the virus in real time, allowing scientists to model it's coverage and produce study results to share with the global community.

Mapping tools like this provide an effective means of giving as much information as possible in a way that’s easy to understand to the people who can make a difference with the information.

Increased life expectancy

On a more positive note, we can get a detailed look over time of how life expectancy is improving around the world.

Life expectancy in 2019 from Our World in Data

While it’s increased more in some areas than others, the global improvements are clear, and we get to see this rise in some countries from hundreds of years ago!

Explore the beauty of maps and applying data to them

How can I describe it? Good food is like music you can taste, color you can smell. There is excellence all around you. You need only to be aware to stop and savor it. - Chef Gusteau

There’s also a creative side and beauty to great maps. Thick datasets applied to a map (or any medium) can often become literal works of art.

The Room of Change from Pentagram

Whether showcased in an exhibit or one of the many options to purchase on Etsy, presenting meaningful data in a beautiful way can be impactful not just from an informational perspective, but also a cultural one.

Sometimes the interactions can be fun

Maps can also provide some interactivity that makes them fun to explore while you learn more about the dataset, like this globe that maps out global commodities from DailyFX.

Global Commodities interactive map from DailyFX

Though the data can frequently be thick and boring on its own, that doesn’t mean we can't find more interesting ways to present the data to interact with.

And sometimes maps can provide a listening experience

This map from at radiooooo.com allows you to travel around the world and through time.

Music Radio from radiooooo.com

Their use of a map makes it easy to identify the part of the world the person wants to explore.

Stop and appreciate the maps around you

Whether you notice it or not when you’re browsing the web every day, you most likely run into visualizations of datasets that create powerful ways to present that data in a way that’s more easily understood.

_u/dancingchopstix's recordings of their truck driving travels_

Luckily, we don’t have to work hard to find this inspiration, as we can visit aggregations of beautiful maps and general datasets like that of /r/dataisbeautiful.

Experiment, be creative, explore other ways to visualize data

You must be imaginative, strong-hearted. You must try things that may not work, and you must not let anyone define your limits because of where you come from. Your only limit is your soul. - Chef Gusteau

Maps come in all shapes and sizes. While shaded geographic areas typically work well with election results, it might not work as well for showcasing your summer road trip.

50 State Project road trip map

Exploring common map types

You’ve probably experienced more map types than you realize. Given it’s a powerful way to present data, maps are used frequently across the web.

A choropleth map is commonly seen for election results and regional datasets where a particular geographic location represents a point of reference.

CNN Map of Democratic primary after Super Tuesday

Heat maps on the other hand allow you to reflect on the intensity of a data point over a given area. This is powerful when you want to represent both the area covered of a dataset but also range the data represents at the same time, such as population density.

ArcGIS GPW 2015 Population Density heat map from

Learn from others, but don’t be afraid to create a new path

Explore and play around with different techniques to visualize data on a map. There’s frequently not one way to do it, meaning you can be creative and experiment with different ways of presenting your map.

But that also means you don’t need to be stuck working within the constraints of the common map types. Use the tools available or create new ones and break new ground. The most important thing is presenting the data in a way that will provide the most impact to those consuming it.

Don’t give up, learn from your experiences

What I say is true — anyone can cook... but only the fearless can be great. - Chef Gusteau

While there may not always be a right way, there sometimes are wrong ways. But don’t let failure stop you!

Take these failures as a learning experience in your journey of creating interesting and effective maps. By being bold with your experimentation, you’ll find yourself discovering techniques or creating new ways that can ultimately help people better understand map data.

You don’t have to be a cartographer to build great maps

Not everyone can become a great artist; but a great artist can come from anywhere. - Anton Ego

Towards the end of Remy’s journey, the food critic Anton Ego who was once critical of Gusteau's claim that “anyone can cook” came to a realization of what our chef truly meant.

Ratatouille critic Anton Ego's revelation

While it’s not reasonable to assume that every single one of us will be a great mapper, everyone has the opportunity to try and explore the medium.

And it certainly helps that we have plenty of tooling to help us get there. Whether building your own with Leaflet or identifying a few locations on a Google Map, the resources and community around mapping are endless.

Jump in with some resources to get started

For the developers out there who are inspired to get started, here are a few resources to start off with mapping:

• How to build a mapping app in React the easy way with Leaflet
• How to Visualize Air Pollution using Folium Maps - An In Depth Tutorial
• How to integrate maps in React Native using react-native-maps
• How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet
• How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter
• How to Create your own Santa Tracker with Gatsby and React Leaflet
• Building Maps with Impact on React and the JAMstack (Video)
• Gatsby Starter Leaflet
• Leaflet
• OpenLayers
• My Maps by Google

What’s your favorite map experience or tool?

Share with me on Twitter!

There's an easier way to do it than telling them to "turn left at the cow, after the big tree": dropping a pin in Google Maps.

What does this mean?

When you drop a pin in your exact location, you're saving the GPS coordinates of that spot.

That way, when you share it with your friend, you're telling them exactly where you are - not the nearest street address (which might be miles away).

So how do you do it?

Let's go through the steps to add (and remove) a pin from Google Maps, both on your PC and your phone.

How to drop a pin on your PC:

Step 1: Open your favorite browser and go to Google Maps.

Step 2: Get to a more specific location

In the "Search Google Maps" field, enter a more specific location so you can narrow down your search area.

Pick your starting point

Now you're getting closer. But still not close enough. The Barton Creek Greenbelt in Austin is a fairly large place. So zoom in a little.

Step 3: Drop your pin

Once you're zoomed in, select the location you'd like to pin. Right-click, and then select "Directions to here" from the drop down that appears:

Right click to drop that pin exactly where you are (or want to go)

It'll then ask you to enter a starting point (where's your friend coming from?) and will produce driving directions to that spot.

Getting directions

Step 4: Share your directions

Now you just have to tell your friend where to go - so you'll want to share those directions.

Click the hamburger menu (three horizontal bars) in the upper left, and select "Share or embed maps" from the long dropdown list.

Share 'em with a friend

You'll have the option to share the link via social media or, if you'd like to keep it private, to copy the link and send it directly to your friend:

Or share 'em with everyone (only if you want the world to know where you are)

There you go! Your friend will have a much better chance of finding you now.

How to remove the pin

If you want to remove the pin from Google Maps, simply right click on it and select "Remove this destination." Poof, it's gone.

How to drop a pin on your phone

It's super easy to drop a pin on your iPhone. Simply open the Google Maps app and navigate to the general area where you are/want to be.

Step 1: Find your spot

Zoom in, like we did above, until you can see the spot you'd like to pin. Then just press and hold on the screen until that little red pin drops:

Just a light press and hold will bring up that red pin

Once you've placed the pin, you'll see some options down at the bottom. You can choose to:

• Get directions from a certain place to that spot
• Label that spot for future use
• Share the GPS coordinates (via a link) through text, email, and so on
• Download that map so you can access it offline

Step 2: Share your pin

You can share your pin with a friend much the same way we did above. For example, you can send the coordinates/link via text:

Choose to share your location via air drop, message, email and so on.

You can also get direction from a location to the pin. If you choose this option, just select the "directions" tab and enter a starting spot.

For the visual learners out there...

See, easy peasy :)

How to remove the pin

If you want to remove that pin, simply hit the x in the search field and it'll disappear.

Just clear the search field and the pin will go away.

Now you can always find your friends (or be found) - even if you're in the middle of nowhere.

In this article, we’ll learn how to integrate a SAP Conversational AI chatbot into any of your web applications and provide users with a fun and intuitive way to interact with the UI!

Conversational interfaces are gaining in popularity, especially for transacting with seemingly opaque backend systems. For example, we can deploy a chatbot to walk a customer through a troubleshooting process and create a ticket if they require further assistance; all without the customer having to know the ticket creation process.

This allows for a more intuitive experience for your customer, increasing customer satisfaction, while also improving efficiency by freeing employees from handling the classification and routing of tickets.

Conversational AI can handle this out of the box, but what if your users want to be able to interact with your front end application?

For example, it might be nice for your user to navigate to a certain page within your website without having to find the exact link. Or allow your user to apply a complex filter to a list of products without having to click around menus.

Though our webchat can be imbedded in any website, it does not have the contextual awareness of the UI necessary for these sorts of interactions. To demonstrate how we can accomplish this contextual awareness, we will create a simple map application with an embedded bot that has the ability to move the map and zoom in or out:

Resources

Create your first chatbot on SAP Conversational AI

Learn how to selfhost the Webchat

Google Maps APIs

Map mover bot

Frontend Application source code

Final Map Application

Pre-requisites

• First, you will need to be comfortable building a simple bot using SAP Conversational AI. If you are unfamiliar with the platform, head over to this tutorial to learn how to build a hilarious joke bot.
• You will also need to be able to host our webchat component somewhere that you control. Our GitHub has all the information to get you started.
• It is also expected that you are at least familiar with JavaScript and front end web development basics.

Tutorial

To start, we will need to define the interface for our bot to be able to send commands and messages to our front end. This will be accomplished by sending a stringified JSON object in the place of the normal message string we generally send to the user. Our modified webchat will be able to understand this JSON object, take the defined action and finally display a “message” to the user.

This can be accomplished fairly simply; we will send an object with an action of either “move” or “zoom” and then a message that we can show to the user. Note that we will pass this JSON object as a string, and it is our assumption that the application will parse it and display only the value of “message” to the user.

{ "action": "move" || "zoom", "message": "This will be displayed to the user" }

If our action type is “move”, the map will need coordinates to navigate to.
So, we will include a location’s coordinates in our JSON object. Alternatively, if our action is zoom, we will need to know whether to zoom in or out. For this, we will include a direction represented as a 1 for in or a -1 for out. With this defined, here are some examples of what our JSON objects could look like:

{"action": "move", "location": { "lat": -8.3405389, "Ing": 115.0919509 "message": "Going to Bali, Indonesia!" }{"action": "zoom" "direction": 1, "message": "Zooming in!"}

With that in mind, we can start building our bot. As always, we will start with defining the intents our user could say. In this case we have zoom and move-map.

Note that we will need to tag the sentences in @zoom with the entity ‘direction’, but ‘location’ is automatically recognized in @move-map. Luckily for us, the location gold entity comes with the longitude and latitude out of the box, so we will be able to easily pass these to the front end.

To get the 1 or -1 that represents our zooming direction, we will leverage custom enrichments. We will add the keys “name” and “direction” with the following values. Then map the correct entity values to their respective key values.

Now that we can recognize our move-map intent, we just need a skill that is triggered if our intent is matched:

And requires a location:

And finally sends a message back telling the front-end where to go:

The zoom skill can be implemented in much the same way; I encourage you to try it for yourself!

Now that our bot is done, we will need to host the webchat locally so that we can modify it to understand our “unusual” responses. If you are unfamiliar with the self-hosting process, check out this github.

Finally, it’s time to build our web application. We will start by including a container div for our map, the script we will write to handle the map interactions (map_controls.js), the necessary script as described in this tutorial from Google, and the script tag pointing to our locally hosted bot. It should look something like this:

To complete our simple application, we will implement our map initialization and zoom/move methods:

function initMap () {  window.map = new google.maps.Map(document.getElementById('map'), {    // OPTIONS    center: {lat: -34.397, lng: 150.644},    zoom: 8,    zoomControl: false,    streetViewControl: false,    mapTypeControl: false,    rotateControl: false,    scaleControl: false,    fullscreenControl: false  });}     const zoom = (direction) => {  window.map.setZoom(window.map.getZoom() + direction);}

const setCenter = (lat, lng) => {  window.map.setCenter({lat: lat, lng: lng});}

Once we have the chatbot successfully added to our application, we will be able to ask it to move around or zoom in/out, but it will still just display that ugly JSON string to us. To solve that, we will add the following code to Webchat/src/containers/Chat/index.js. This will search the window object for a function called applicationParse and call it if it exists.

const getApplicationParse =  messages  => {  return new Promise(resolve => {    if (!window.webchatMethods || !window.webchatMethods.applicationParse) {      return resolve()    }    // so that we process the message in all cases    setTimeout(resolve, MAX_GET_MEMORY_TIME)    try {      const applicationParseResponse = window.webchatMethods.applicationParse(messages)      if (!applicationParseResponse) {        return resolve()      }      if (applicationParseResponse.then && typeof applicationParseResponse.then === 'function') {        // the function returned a Promise        applicationParseResponse          .then(applicationParse => resolve())          .catch(err => {            console.error(FAILED_TO_GET_MEMORY)            console.error(err)            resolve()          })      } else {        resolve()      }    } catch (err) {      console.error(FAILED_TO_GET_MEMORY)      console.error(err)      resolve()    }  })}

Now, we will call getApplicationParse before the call to setState in componentWillReceiveProps. This will ensure that our application has a chance to parse the response from the bot before anything is sent back to the user.

componentWillReceiveProps(nextProps) {  const { messages, show } = nextProps    if (messages !== this.state.messages) {    getApplicationParse(messages)    this.setState({ messages }, () => {      const { getLastMessage } = this.props      if (getLastMessage) {        getLastMessage(messages[messages.length - 1])      }    })  }  if (show && show !== this.props.show && !this.props.sendMessagePromise && !this._isPolling) {    this.doMessagesPolling()  }}

Finally, we need to implement applicationParse and include it in the window object from map_controls.js. Here, we will loop through our messages, and if it is a valid action command from the bot, take the action and return only the message back to the user.

window.webchatMethods = {  applicationParse: (messages) => {    messages.map(message => {      try {        var obj = JSON.parse(message.attachment.content);        console.log(obj);        if(obj !== undefined &&            obj.action == 'zoom' &&            typeof obj.direction === "number"){          message.attachment.content = obj.message.toString();          zoom(obj.direction);        } else if (obj !== undefined &&                    obj.action == 'move' &&                    typeof obj.location.lat === "number" &&                    typeof obj.location.lng === "number") {          message.attachment.content = obj.message.toString();          setCenter(obj.location.lat, obj.location.lng);        }      } catch (err) {        // Invalid JSON - treat it as a regular message and pass it back to UI as is      }      message    })     return messages;       }}

You can now ask your bot to move or zoom the map and it will send a message that the application can interpret and act upon.

With this tool in your tool belt, you can now integrate a chatbot into any of your web applications!

Originally published on SAP Conversational AI blog.

Make them pink, blue, green, yellow or purple!

By default, the Google Maps marker is red in color. This article will show how to add different color markers to Google Maps. So, let’s get started. ?

1. Load Google Maps

Create an HTML file which loads Google Maps by following Google Maps API official docs: Hello World.

Your code will look something like the code snippet below.

Note: Remember to change YOUR_API_KEY to your actual Google Maps API key.

2. Add different color markers

To add a blue color marker, we need to change the icon of the marker. This is done by adding an icon property and specifying a URL for it like below.

icon: {                               url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"                           }

Note that we specify blue-dot.png at the end of the URL to get a blue marker. To add a green marker simply change it to green-dot.png so that the URL will be [http://maps.google.com/mapfiles/ms/icons/green-dot.png](http://maps.google.com/mapfiles/ms/icons/blue-dot.png) .

Some other colors available:

1. pink: pink-dot.png
2. yellow: yellow-dot.png
3. purple: purple-dot.png

To get the URL of more marker icons, please refer to this website.

3. Wrap into add marker function

To make the code cleaner, we can define an addMarker function which takes in latLng and color of the marker. Note that we store the markers added in the a global markersArray in case we need to perform any operations on the markers later.

Open the HTML file in the browser. It should look like this:

You can get the full final version of the code from here. Please let me know how it goes in the comments below.

Feel free to check out another Google Maps tutorial I have written:
Implement click on JavaScript Google Map to add draggable markers with polyline

Sometimes you want to grab data from a website for your own project. So what do you use? Ruby, Nokogiri, and JSON to the rescue!

Recently, I was working on a project to map data about bridges. Using Nokogiri, I was able to capture a city’s bridge data from a table. I then used links within that same table to scrape associated pages. Finally, I converted the scraped data to JSON and used it to populate a Google Map.

This article walks you through the tools I used and how the code works!

See the full code on my GitHub repo.

Live map demo here.

The Project

My goal was to take a table from a bridge data website and turn it into a Google map with geolocated pins that would produce informational popups for each bridge.

The Idea: HTML Table to Map

To make this happen, I’d need to:

1. Scrape data from the original website.
2. Convert that data into a JSON object.
3. Apply that data to make a new, interactive map.

Your project will vary, surely — how many people are trying to map antique bridges? — but I hope this process will prove useful for your context.

Nokogiri

Ruby has an amazing web scraping gem called Nokogiri. Among other features, it allows you to search HTML documents by CSS selectors. That means if we know the ids, classes, or even types of elements where the data is stored in the DOM, we’re able to pluck it out.

The scraper

If you’re following along with the GibHub repo, you can find my scraper in bridges_scraper.rb

require 'open-uri'require 'nokogiri'require 'json'

Open-uri lets us open the HTML like a file and pass it to Nokogiri for the heavy lifting.

In the code below, I’m passing the DOM information from the URL with the bridge data over to Nokogiri. I then find the table element holding the data, search for its rows, and iterate through them.

url = 'https://bridgereports.com/city/wichita-kansas/'html = open(url)

doc = Nokogiri::HTML(html)bridges = []table = doc.at('table')

table.search('tr').each do |tr|  bridges.push(    carries: cells[1].text,    crosses: cells[2].text,    location: cells[3].text,    design: cells[4].text,    status: cells[5].text,    year_build: cells[6].text.to_i,    year_recon: cells[7].text,    span_length: cells[8].text.to_f,    total_length: cells[9].text.to_f,    condition: cells[10].text,    suff_rating: cells[11].text.to_f,    id: cells[12].text.to_i  )end

json = JSON.pretty_generate(bridges)File.open("data.json", 'w') { |file| file.write(json) }

Nokogiri has lots of methods (here’s a cheat sheet and a starter guide!). We’re using just a few.

The table is found with .at(‘table’), which returns the first occurrence of a table element in the DOM. This works just fine for this relatively simple page.

With the table in hand, .search(‘tr’) provides an array of the row elements that we iterate over with .each. In each row, the data is cleaned up and pushed into a single entry for the bridges array.

After all the rows are collected, the data is converted into JSON and saved in a new file called “data.json”.

Combining data from multiple pages

In this case, I needed information from other associated pages. Specifically, I needed the latitude and longitude of each bridge, which was not featured on the table. However, I found that the link in the first cell of each row led to a page that did provide those details.

I needed to write code that did a few things:

• Gathered links from the first cell in the table.
• Created a new Nokogiri object from the HTML on that page.
• Pluck out the latitude and longitude.
• Sleep the program until that process completes.

cells = tr.search('th, td')  links = {}  cells[0].css('a').each do |a|    links[a.text] = a['href']  end    got_coords = false    if links['NBI report']    nbi = links['NBI report']    report = "https://bridgereports.com" + nbi    report_html = open(report)    sleep 1 until report_html    r = Nokogiri::HTML(report_html)        lat = r.css('span.latitude').text.strip.to_f    long = r.css('span.longitude').text.strip.to_f

    got_coords = true  else    got_coords = true  end    sleep 1 until got_coords == true

  bridges.push(        links: links,        latitude: lat,        longitude: long,        carries: cells[1].text,        ..., # all other previous key/value pairs  )end

A few additional things are worth pointing out here:

• I’m using the “got_coords” as a simple binary. This is set to false by default and is toggled when the data is captured OR simply not available.
• The latitude and longitude are located in spans with corresponding classes. That makes securing the data simple: .css(‘span.latitude’) This is followed by .text, .strip and .to_f which 1) gets the text from the span, 2) strips any excess whitespace, and 3) converts the string to a float number.

JSON → Google Map

The newly formed JSON object has to be modified a touch to fit the Google Maps API. I did this with JavaScript inside map.js

The JSON data is accessible within map.js because it has been moved to the JS folder, assigned to a variable called “bridge_data”, and included in a