# Plot marker on a map in canvas created by processing

**URL:** https://discourse.processing.org/t/plot-marker-on-a-map-in-canvas-created-by-processing/16149
**Category:** Coding Questions
**Created:** [December 5, 2019, 11:53am UTC](https://discourse.processing.org/t/plot-marker-on-a-map-in-canvas-created-by-processing/16149 "2019-12-05T11:53:34Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![iamgsshetty](https://avatars.discourse-cdn.com/v4/letter/i/ecae2f/32.png) [@iamgsshetty](https://discourse.processing.org/u/iamgsshetty)
#### Post date: [December 5, 2019, 11:53am UTC](https://discourse.processing.org/t/plot-marker-on-a-map-in-canvas-created-by-processing/16149/1 "2019-12-05T11:53:34Z")

</div>

I am creating a GUI for my airplane which should look like the image

 ![d7df49f4-1b35-43ba-9580-77b9a86fdbce_h200F3lbmz](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cd50ceb893abce39e94805c91b8e07883a5702d6.jpeg)

So need to add a map showing live location of my airplane How would I do this using processing

---

<div class="post-metadata">

### Author: ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)
#### Post date: [December 5, 2019, 12:41pm UTC](https://discourse.processing.org/t/plot-marker-on-a-map-in-canvas-created-by-processing/16149/2 "2019-12-05T12:41:30Z")

</div>

Hi iamgsshetty  
First you load the map with loadImage(), then load a small plane image with transparent background.  
Than in draw() you use image() to draw map, and after that draw the plane. You can use the map() function to display real distances if you wish.

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [December 5, 2019, 2:11pm UTC](https://discourse.processing.org/t/plot-marker-on-a-map-in-canvas-created-by-processing/16149/3 "2019-12-05T14:11:16Z")

</div>

Or you could take a look at Unfolding. It‘s a library that gives you access to Google Maps (and others) and allows you to place markers (and Chance their image).

Although you‘d probably need an Internet Connection to load the map, so maybe that‘s not ideal 😅

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [December 9, 2019, 12:30am UTC](https://discourse.processing.org/t/plot-marker-on-a-map-in-canvas-created-by-processing/16149/4 "2019-12-09T00:30:40Z")

</div>

You might also want to consider the tradeoffs of Processing (Java) vs p5.js here. If you want to be using web-embedded maps, then building a web interface that mixes controls with a map embed might be easier in JavaScript – again, depending on your specific needs.

---

<div class="post-metadata">

### Author: ![Sonarmiss](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sonarmiss/32/7594_2.png) [@Sonarmiss](https://discourse.processing.org/u/Sonarmiss)
#### Post date: [December 24, 2019, 2:16pm UTC](https://discourse.processing.org/t/plot-marker-on-a-map-in-canvas-created-by-processing/16149/5 "2019-12-24T14:16:13Z")

</div>

Have a look at the Unfolding library, thus you can access a number of maps (like Google Maps) + place markers.