This example load WebView with built-in HTML inside APK, using Google Maps JavaScript API v3 with Panoramio Layer.
The code created using project wizard of new Android SDK Tools 22.6, MainActivity extends android.support.v7.app.ActionBarActivity with Fragment.
Create /assets/panoramiomap.html, copy the
JavaScript + HTML example from
Google Maps JavaScript API v3 example with Panoramio Layer.
<!DOCTYPE html>
<html>
<head>
<title>Panoramio Layer</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#photo-panel {
background: #fff;
padding: 5px;
overflow-y: auto;
overflow-x: hidden;
width: 300px;
max-height: 300px;
font-size: 14px;
font-family: Arial;
border: 1px solid #ccc;
box-shadow: -2px 2px 2px rgba(33, 33, 33, 0.4);
display: none;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=panoramio"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(47.651743, -122.349243)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
panoramioLayer.setMap(map);
var photoPanel = document.getElementById('photo-panel');
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(photoPanel);
google.maps.event.addListener(panoramioLayer, 'click', function(photo) {
var li = document.createElement('li');
var link = document.createElement('a');
link.innerHTML = photo.featureDetails.title + ': ' +
photo.featureDetails.author;
link.setAttribute('href', photo.featureDetails.url);
li.appendChild(link);
photoPanel.appendChild(li);
photoPanel.style.display = 'block';
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<ul id="photo-panel">
<li><strong>Photos clicked</strong></li>
</ul>
<div id="map-canvas"></div>
</body>
</html>
/res/layout/activity_main.xml
<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:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://arteluzevida.blogspot.com/"
android:textStyle="bold" />
<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.androidwebviewpanoramio.MainActivity"
tools:ignore="MergeRootFrame"
android:background="#505050" />
</LinearLayout>
Modify /res/layout/fragment_main.xml to add a <WebView>
<RelativeLayout 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"
tools:context="com.example.androidwebviewpanoramio.MainActivity$PlaceholderFragment" >
<WebView
android:id="@+id/mybrowser"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
MainActivity.java
package com.example.androidwebviewpanoramio;
import android.support.v7.app.ActionBarActivity;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;
public class MainActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction()
.add(R.id.container, new PlaceholderFragment()).commit();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
/**
* A placeholder fragment containing a simple view.
*/
public static class PlaceholderFragment extends Fragment {
WebView myBrowser;
public PlaceholderFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main, container,
false);
myBrowser = (WebView) rootView.findViewById(R.id.mybrowser);
myBrowser.loadUrl("file:///android_asset/panoramiomap.html");
myBrowser.getSettings().setJavaScriptEnabled(true);
return rootView;
}
}
}
<uses-permission android:name="android.permission.INTERNET"/> is needed in AndroidManifest.xml.
Download the files.
Download and try the
APK.
)
