google map in app inventor 2

[stranger65471]

hello all !!

I am building an app recently and I wish it to have several google map functions

I briefly draw my fantasy of this app as the picture :

1.I wish to let user input several places and store the values (done)

2.the canvas below will display a tiny google map (consider that I'm a new hand, maybe just a static one first)

   the map will have the current location of the user at the center as default,

  and when user add a new point , the map will display the point with the red pinpoint icon.

3.I wish to let user decide the route from point to point (I think this is impossible for a static one ,but I hope at least the shortest route)

4.more information for the point on the map like the icon mark or placemark name etc

for these quest , I have search for the solutions myself including this forum , but I still have some questions...

1.It seems that googlemap API provides what I want , and I have looked up to https://developers.google.com/maps/documentation/javascript/tutorial#api_key but I still       don't know how to set those things up in ai2 ( it shows many java language stuff , but I don't know how to use them )

  Also , I went to the API page to activate my API key, but the page shows so many options and I'm not sure which one has the function I want

2.I've also found some people suggested we do this with fusion map , but it seems that fusion map is for maps already existed (like a tour map) , my case is to display

points that added by the user , so I'm not sure I can do this with fusion map .

3.I've seen some ai2 tutorial pages shows java stuff,and I have read about the java bridge which allows developer to translate their ai2 programs to java language. I'm wondering that those java script can be some kind of "settings" for the app and can be added to media as sources, please tell  me if I'm wrong or right .

 

please help me with this ,or guide me to any corresponding tutorial, thank you so much !

[SteveJG]

You can do part of what you want with a Fusion Table map.    What have you tried?

You can make the map you want with a Google Static Map and place pins on it.   You can not have the app produce a route.

You can make an app using the standard Google Map providing a location of the user (either using a set location or using the AI2 LocationSensor) and then provide a destination location.   You can use the ActivityStarter to do this.

Here is a brief outline:

Open a Google Map

Use an activity starter with the following settings:

Action = android.intent.action.VIEW 

Activity = com.google.android.maps.MapsActivity 

Package = com.google.android.apps.maps 

DataURI = Geocode or location i.e. geo:0,0?q=Metreon, San Francisco, CA

Open Google Navigation

Use an activity starter with the following settings:

Action = android.intent.action.MAIN 

Activity = com.google.android.maps.driveabout.app.NavigationActivity 

Package = com.google.android.apps.maps 

DataURI = URL or geocode of destination.

Show a map for a location

If you know the latitude and a longitude of a location, you can show a map using an activity starter with these properties to show a map of the area:

Action: android.intent.action.VIEW 
DataUri: geo:37.8,-122.23?z=23

The format of the DataURI is specific to the app. In this example, the URI specifies a z (zoom) of 23, which is the largest zoom value. Zoom value is optional and ranges from 1 (the entire Earth) to 23.

If you know the zip code, you can set the activity starter properties as follows:

Action: android.intent.action.VIEW 
DataUri: geo:0,0&q=94043

If you have a street address, you can use a DataUri that encodes the address with a scheme called URL encoding :

Action: android.intent.action.VIEW 
DataUri: geo:0,0&q=5000% 20MacArthurBlvd%20Oakland%2CCA

Generally in URI encoding the only characters you have to replace are spaces ( %20 ) and punctuation marks, such as comma ( %2C ) and period ( %2E ).

Once you have a basic Google Map, you can work within the Google Map in the ActivityStarter to display a street route.   Displaying a route without the Google Map or without the Google Javascript API is doable but requires writing a huge amount of code.

What have you tried?      Post screen captures of your blocks if you run into difficulty and someone will probably provide specific advice.

Also, there are two MIT tutorials you should do:  Where Is My car   and the Location Sensor tutorial    http://appinventor.mit.edu/explore/ai2/tutorials3818.html?&page=2

You should also review theAI2 free online eBook   http://appinventor.mit.edu/explore/ai2/tutorials.html   ... the links are at the bottom of the Web page.  There is a section on geolocation (hidden withing other material) that may help you.

You can  do what you want to do with a Static Map with Google Maps  or using a Fusion Table map.  The basic Google Map API only can render two locations, your present location, and your destination if you use AI2.

The link you provided works with a static map using AI2.   You are restricted to 2048 (? I think) characters in the url address.  This works fine for a reasonable number of 'pins.'

Here is a Fusion Table solution with AI2:  https://groups.google.com/forum/#!searchin/mitappinventortest/tips$20and$20tricks$20$20steve/mitappinventortest/y61_so09ClU/OQxDipfOAyEJ

You can show a Google Map showing directions using the Google Maps API 3   https://developers.google.com/maps/documentation/javascript/tutorial .

More resources:  https://groups.google.com/forum/#!searchin/mitappinventortest/tips$20and$20tricks$20map$20steve/mitappinventortest/W80TqLFmy8c/McYfWhSYxgYJ

https://groups.google.com/forum/#!searchin/mitappinventortest/tips$20and$20tricks$20map$20steve/mitappinventortest/y61_so09ClU/OQxDipfOAyEJ

Regards,

Steve 

[hillofbeans]

Hi,

I'm new to forums so I'm not sure I'm doing this right, but I have a related question about google maps.

I have an Android tablet which has wifi but no other network support.  I've created an appinventor2 app which saves locations (using GPS) onto tinyDB, and allows the user to display google maps to show those locations later. I use an activityStarter with the parameters that SteveJG suggests:

Action = android.intent.action.VIEW 

Activity = com.google.android.maps.MapsActivity 

Package = com.google.android.apps.maps 

DataURI =  geo:lat,long?z=23

This works fine without any network, as the google maps app is invoked without need for the internet, which is just what I want.

My problem is that the map that is displayed has no marker (pin).  If I add

&q=lat,long

to the DataURI, then the pin appears, but only if the network is available!

Is there any way of getting the google maps app to show the pin for the location without needing a network?

Thanks for any help!

[SteveJG]

@hillofbeans

The simple answer is, with Google Maps regular API, no , you need a connection to get a pin (though honestly, I can not say I tried to use a 'saved' google map ).  Be aware, Google is continually modifying the Google Map api , especially over that past few months, adding more capabilities.

If you capture and save a Google Map's static map (while you have a WIFI or network connection)you can save the map to an image, use the map to post and post 'pins' to it if you know the latitude and longitude of two alternate map corners when you have no connection and if you have a gps receiver.  Easier said than done.    It is difficult to discover the coordinates of the corners.  Yes, the corner coordinates can be calculated or if you can not do the coding, you can figure them out by inspection with possibly an old fashoned highway map that has a lat/lon grid.

Always able to post to a map...certainly.  You can use a Flat map for which you know the corner information, save the flat map to a Canvas.  A flat map is a non-Mercator map projection that allows direct posting of lat / long data without complicated formulas (check out openstreetmap ).  You  post the pins you want by converting World coordinates (the lat/lon) to Screen coordinates ...an exercise in scaling.       If your device has a gps receiver, the LocationSensor can be used to establish the device's location   (the gps does not require a network connection to provide location information) so it is possible to post your current location anytime.

Search the forum for other posts about     maps    google maps     static maps   or  flat maps for more information.

Regards,

Steve

[hillofbeans]

Thanks for your rapid response, Steve (even though the answer isn't what I wanted to hear!).

The maps that I use have been saved in Google maps (using 'OK maps') while the network was available, but unfortunately there are no pins with geo:lat,long?z=

When you mention the coordinates of the corners, do you mean the corners of the part of the map that is visible on the tablet screen (which would depend on the zoom value and the screen size).  Sounds painful!

Thanks again.

[SteveJG]

Perhaps yes, I mean the corners of the image that represents the map. Yes it is painful, but it is doable, just requires a LOT of code, at least the way I do it.  There are issues using a Google map...Google maps are Mercator map projections, so depending on how accurate the pin locations need to be, the developer has the issue of compensating for the variation in the spacings between longitude 'lines.' ...that do not exist if one uses a flat map.

-- Steve

[Taifun]

you can do a lot with the Google Maps API in combination with fusiontables

example: https://developers.google.com/maps/documentation/javascript/examples/layer-fusiontables-simple

however there is some HTML/JavaScript know how necessary...

and you can use it in the webviewer...

I have a simple demo example, which uses the Google Maps API on my page 

Get coordinates for any Location on Google Maps back to App Inventor

another solution similar to SteveJG''s suggestion: see James' answer here https://groups.google.com/d/msg/mitappinventortest/AylMnTitkOk/bB4GIkZdVxgJ

Taifun