Friday, June 28, 2013

Embed html using Google Maps JavaScript API v3 in Android App

The Google Maps Javascript API Version 3 is now the official Javascript API. Version 2 of this API has been officially deprecated as per our deprecation policy.

The Google Maps Javascript API lets you embed Google Maps in your own web pages. Version 3 of this API is especially designed to be faster and more applicable to mobile devices, as well as traditional desktop browser applications.

The API provides a number of utilities for manipulating maps (just like on the http://maps.google.com web page) and adding content to the map through a variety of services, allowing you to create robust maps applications on your website.

The JavaScript Maps API V3 is a free service, available for any web site that is free to consumers. Please see the terms of use for more information.




It's easy to embed WebView, load with HTML using Google Maps JavaScript API v3, in Android App:



Create /assets/simplemap.html, copy from Simple Map example in Google Maps JavaScript API v3, html code with Google Maps JavaScript API v3.
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>


Modify /res/layout/activity_main.xml, to add <WebView> in layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold"
        android:layout_gravity="center_horizontal"
        android:autoLink="web" />
    <WebView
        android:id="@+id/mybrowser"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>


MainActivity.java
package com.example.androidsimplemap;

import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;

public class MainActivity extends Activity {
 
 WebView myBrowser;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  myBrowser = (WebView)findViewById(R.id.mybrowser);
  myBrowser.loadUrl("file:///android_asset/simplemap.html");
  myBrowser.getSettings().setJavaScriptEnabled(true);
 }

}


Note that, in order for your Activity to access the Internet and load web pages in a WebView, you must add the INTERNET permissions to your Android Manifest file:

<uses-permission android:name="android.permission.INTERNET"/>



add@2014-05-22:

download filesDownload the files.

Download and try the APK.

12 comments:

Anonymous said...

oh my fucking god... first tutorial i find that works!!! it's excellent, it took me about 2 minutes to do it.

I LOVE YOU DUDE

mike said...

Hi, Nice tutorial.. however, how do you add the map API to the script ?

Amit Sharma said...

hi thank you .....this is very great code but if we want to do online map then that how we can do this ....

Shinu said...

Hi
I am getting a white screen only. Google map is not loading. Please help me

aps87 said...

Works fine thank you very much

Anonymous said...

where i have to put the simplemap files?

Andr.oid Eric said...

/assets/simplemap.html

Anonymous said...

the file cant be loaded

Andr.oid Eric said...

Test again and work as expected, check the video.

You can download the files in Eclipse Project form, or try the APK.

Anonymous said...

Excellent dude!!! Thank you very much!!!!

Anderson James said...

Very useful tutorial. I have one question regarding Map is that how can I add Marker and InfoWindow on marker click using map API V3?

Lanke Vijayvarma said...

hi

Please help me to get /assets/simplemap.html in android studio from the starting point
means from the start new project onwords.

THANK YOU