Embedded Google Map in app inventor

[Duong Luc]

I want to embedded google map in my app. It looks like using a part of interface for map area, the rest is other functions.Is it possible ? If not, how about using just an image instead ?

Many thanks !

[Nico Marikucza]

Taifun offers a tutorial: How to use a Google Maps link to show up in a Button as a picture

You only have to "translate" the blocks into the App Inventor 2 language.

Nico

[SteveJG]

There are several ways to do 'embed' a Google Map.  The following example shows how to use a Google Static Map as the background of a Canvas component.

Place the canvas in a vertical arrangement and your functions in another arrangement both within a horizontal arrangement and you have what you want.

You can make this look different by changinging the blocks as in  https://developers.google.com/maps/documentation/static-maps/intro#quick_example (this is not an App Inventor example).   Change the zoom the area of the canvas etc.  Read the Google Static Map example to understand what needs to be changed.

Is this what you want to do Duong?

Regards,

Steve

[Duong Luc]

Thank you, i followed these tutorials and they worked. I see these ways are showing the map as a picture, but any idea to embed the "real" map which can do something like zoom, drag, scroll ?

[SteveJG]

What do you mean, real Google Map?  If you want only your location and one (1) destination posted; do the Where is My Car Tutorial ... perhaps what you mean by  "real" Google Map.

The 'static' in Static Map means fixed or not moving.  You cannot browse adjacent map tiles with a static map.

Control the zoom of a Static Map by changing the zoom=14  or whatever value using a Button or slider with appropriate code.  Then redraw the map. You cannot pinch or expand on the map itself to zoom.

Other than using the join in a Canvas.backgroundimage you have other options.  The 'join' block with a WebView (in the URL slot) provides some panning on the screen.  Use an intent and use the ActivityStarter and your device's default browser.  This provides an 'apparent' zoom but that is only magnification of parts of the existing static map.

To display multiple points with AI,  there are two options I am aware of: 1) a Static Map  or 2)  the business api to place the additional locations on a custom version. There is no free lunch.  If you want your own 280+ locations  AND the ability to zoom, pinch etc. you must take a different approach. A third option is to use a FusionTable 'map' ..easy to display your 280+ locations but 'difficult' to display the device's current location.  A FusionTable map can be viewed in a browser and zoomed.  You can post lots of information but it is not user friendly.

You might get more flexibility and ability to zoom, drag, scroll  using the Google Maps Embed API   https://developers.google.com/maps/documentation/embed/   embeding an html in your Project  or use  the JavaScript API https://developers.google.com/maps/documentation/javascript/   or use the Google Places API  https://developers.google.com/places/web-service/  .   These API's, for the most part are part of Google's Business Map api.

You might be able to do more using Android Studio than App Inventor.

[Duong Luc]

You're so nice, i got it, thank you :)