draw on google maps with app inventor

[Liran Roitman]

Hi all.

I want to make an app that allows the user to draw on google maps but somehow i cant figure it out how to make it in app inventor

I thought about adding some painting pannel to google maps but dont know how with app inventor

Would love to get some idea's 

thanks. 

[SteveJG]

Use the Google Static Maps API, load this map to a Canvas, then draw on the Canvas (which will have the Google Map). in the background.   Canvas is 'the painting panel' equivalent and you add the map to the Canvas; not the other way around.

Regards,

Steve

[Liran Roitman]

Thx for the answer streve.

I will try to do that but it will be possible to get the gps coordinates from the shape where the user draw? 

[Liran Roitman]

I think  i didnt explain this right.

Basically i want to make an app that when the user clicks on a button it will open up to him the "google map" and there i want him to draw an area that he will decide and i want to get the coordinates of the area that he had draw,

So the map should not be static.... the user can move to what ever he want on the map and when he want to draw he will choose from the panel a pen and simply draw,

I've already done the button that pop up google map when the using is pressing on it.... but the thing im struggling on is the "paint pannel;" 

I dont have any idea how to make a paint panel while google map is in the background.

Thanks

[SteveJG]

You may find this article interesting http://puravidaapps.com/coordinates.php   

Basically i want to make an app that when the user clicks on a button it will open up to him the "google map" and there i want him to draw an area that he will decide and i want to get the coordinates of the area that he had draw,

The above link would show you how to 'capture' a corner of the box area, save the location info and capture the three other corners.   What you would do from there, I do not know.  Be aware that Google Maps is based on a system where it looks at a single location, then depending on the zoom setting, scales the map appropriately.  What you are attempting is to 'rubber band' an area and re-plot it I guess.   Perhaps someone knows how to do that, but I do not think that can be done with AI2.   You might be able to do that with JavaScript in conjunction with AI2. or using a different compiler, like Eclipse or Android Studio.

 

So the map should not be static.... the user can move to what ever he want on the map and when he want to draw he will choose from the panel a pen and simply draw,

 

I've already done the button that pop up google map when the using is pressing on it.... but the thing im struggling on is the "paint pannel;" 

I dont have any idea how to make a paint panel while google map is in the background.

 

I do not believe this is possible with the regular Google Map.  The link above does not use the regular Google Map. All you can do with the regular Google Map is post two locations,

your device's location and a destination.   Perhaps someone will correct me.  If you want to 'draw' on the map, it is going to have to be a Static Map , copy it to a Canvas and use the Canvas tool to draw.

The Canvas is Ai2's paint panel. Learn how to use it with the Paint Pot tutorial here:  http://appinventor.mit.edu/explore/ai2/tutorialsd41d.html?

I suggest you do a Web search for  "app inventor  Google Maps"    and see what you can find.

[Liran Roitman]

Thanks for the answer 

I think i will try first to make the canvas way with the static map... 

is it possible to get gps coordinates from the static map ?

[SteveJG]

Yes, it is possible, but requires lots of coding.   When you capture the static map, you need to note the coordinates of the corners, then you can scale the canvas.  The canvas only knows pixels and pixel dimensions. so you have to convert the x,y coordinates of the canvas back to real World coordinates (i.e. gps coordinates) using a scaling algorithm.   When you touch the Android screen on the canvas map, your finger will point to an x,y value, this needs to be converted to lat/lon, if you really need that info You will lose some precision in the coordinates when you do this.

Here are some documents you really should read before doing a lot of coding:  https://developers.google.com/maps/documentation/javascript/reference

and about static maps  https://developers.google.com/maps/documentation/staticmaps/

These are about using Java, but are the official documentation on how to use the various flavors of Google Maps.  The easy way to get a Static Map with AI2 is to use the Activity.Starter  and go to a url you code.      Here is an example:   http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap

&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Clabel:C%7C40.718217,-73.998284&sensor=false

Paste the whole url into your Windows browser and you will see an example of a static map.

Why do I suggest these articles that show how to do this stuff in Java?  Because there is very limited documentation regarding Google Maps regarding AI2, however, the principles apply.

Regards,

Steve

[Liran Roitman]

Thanks alot steve you helped me alot!!