I am using webview to show the videos but the issue I am facing that in IOS the the html video tag is detected by navigator.mediaSession but in android the video tag works but the navigator.mediaSession does works. I am using navigator.mediaseesion to show the video notification. the video tag is embedded in wistia.
Has anyone face that issue.
<WebView
ref={ref}
style={style}
javaScriptEnabled={true}
mediaPlaybackRequiresUserAction={false}
builtInZoomControls={false}
allowsInlineMediaPlayback={true}
scalesPageToFit={false}
scrollEnabled={false}
bounces={false}
contentMode='mobile'
onMessage={onMessage}
source={{
html: WistiaWebPlayer(
videoId,
receiver,
isMiniPlayer,
autoPlay,
playFrom,
title,
showThankYouMessage,
type,
thumbnail,
description
),
baseUrl: 'https://wistia.com',
}}
/>
Html code
export default (videoId, receiver, miniPlayer, autoPlay, playFrom, title, showThankYouMessage, type, thumbnail, description) => `
<!DOCTYPE html>
<html style="height: 100%; width: 100%; padding: 0; margin:0;">
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
html,
body {
overflow-x: hidden;
overflow-y: hidden;
padding: 0;
margin: 0;
}
body {
position: relative;
padding: 0;
margin: 0;
background-color: black;
}
</style>
<title>${title}</title>
<script>
alert(JSON.stringify(navigator.mediaDevices))
if ("mediaSession" in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: "${title}",
artist: "",
album: "${description}",
artwork: [
{ src: "${thumbnail}" ,sizes: '1028x128', type: 'image/png' },
]
});
}else{
alert('gg')
let a= navigator
console.log('kk123',navigator)
navigator.mediaSession.metadata = new MediaMetadata({
title: "${title}",
artist: "",
album: "${description}",
artwork: [
{ src: "${thumbnail}" ,sizes: '1028x128', type: 'image/png' },
]
});
}
</script>
</head>
<body>
<script
src="https://fast.wistia.com/embed/medias/${videoId}.jsonp"
async
></script>
<script
src="https://fast.wistia.com/assets/external/E-v1.js"
async
></script>
<div
class="wistia_responsive_padding"
style="padding:56.25% 0 0 0;position:relative;"
>
<div
class="wistia_responsive_wrapper"
style="height:100%;left:0;position:absolute;top:0;width:100%;"
>
<div
class="wistia_embed wistia_async_${videoId} playerColor=red seo=true videoFoam=true"
style="height:100%;position:relative;width:100%"
allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen
>
<div
class="wistia_swatch"
style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"
>
<img
src="https://fast.wistia.com/embed/medias/${videoId}/swatch"
style="filter:blur(5px);height:100%;object-fit:contain;width:100%;"
alt=""
onload="this.parentNode.style.opacity=1;"
/>
</div>
</div>
</div>
</div>
<script>
window._wq = window._wq || [];
var playerOptions = {
}
if(${type == "meditation"}){
var playerOptions = {
endVideoBehavior: "loop"
};
}
if(${miniPlayer} == true){
playerOptions = {
controlsVisibleOnLoad: false,
playButton: false,
smallPlayButton: false,
volumeControl:false,
fullscreenButton:false,
playbar:false,
settingsControl:false
}
}
playerOptions.autoPlay = ${autoPlay};
if (${showThankYouMessage}) {
playerOptions.plugin = {
"postRoll-v1": {
text: "Thank you for watching",
rewatch: true
}
}
}
_wq.push({
id: "${videoId}",
options: playerOptions,
onReady: function(video) {
video.time(${playFrom});
${receiver}.addEventListener('message', function(data) {
let command = data.data;
let speed = 1;
if (command.includes("speed")) {
speed = Number(command.split(":")[1]) || 1;
command = "speed";
}
switch (command) {
case "play":
video.play();
break;
case "pause":
video.pause();
break;
case "speed":
video.playbackRate(speed);
break;
}
});
video.bind("cancelfullscreen", function() {
video.play();
});
video.bind('secondchange', function(s) {
window.ReactNativeWebView.postMessage(JSON.stringify({seconds:s, percentage:video.percentWatched(),completed:false}));
});
video.bind("end", function() {
window.ReactNativeWebView.postMessage(JSON.stringify({seconds:video.secondsWatched(), percentage:video.percentWatched(),completed:true}));
});
video.bind("play", function() {
window.ReactNativeWebView.postMessage(JSON.stringify({isPlaying:true}));
});
video.bind("pause", function() {
window.ReactNativeWebView.postMessage(JSON.stringify({isPaused:true}));
});
}
});
</script>
</body>
</html>
`;
Related
I am using ArcGIS API for Javascript in a Nuxt application and I would like to find the max and min values of a field in a feature layer hosted on ArcGIS. How to do that ?? Here is the code. The values for the stops for the visualVariables are hard coded and I would like them to be dynamic and take the min and max values of the field.
buildRenderer(fieldName) {
this.renderer = {
type: 'simple', // autocasts as new SimpleRenderer()
symbol: {
type: 'simple-line', // autocasts as new SimpleFillSymbol()
width: '1px',
},
label: 'GIMM',
visualVariables: [
{
type: 'color',
valueExpression: `$feature.${fieldName}`,
legendOptions: {
title: '% KBA stuff',
},
stops: [
{
value: 10,
color: '#bef264',
label: 'minimum',
},
{
value: 600000,
color: '#881337',
label: 'maximum',
},
],
},
],
}
You can make an statistic query requesting min and max of the field you need.
Look at this example I put for you,
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.23
</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/rest/support/Query"
], (
Map,
MapView,
FeatureLayer,
Query
) => {
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0"
});
const minXCoord = {
onStatisticField: "XCoord",
outStatisticFieldName: "minXCoord",
statisticType: "min"
};
const maxXCoord = {
onStatisticField: "XCoord",
outStatisticFieldName: "maxXCoord",
statisticType: "max"
};
let query = featureLayer.createQuery();
query.outStatistics = [ minXCoord, maxXCoord ];
featureLayer.queryFeatures(query)
.then(function (response) {
const stats = response.features[0].attributes;
console.log(stats);
document.getElementById("response").innerText =
`X Coord (min, max): ${stats.minXCoord}, ${stats.maxXCoord}`;
});
});
</script>
</head>
<body>
<div id="response"></div>
</body>
</html>
I am new to Arcgis maps and using ArcGIS Javascript 4.2 library. Currently the features are showing up on the map and I am trying to go to feature and open it's popup programmatically. below is my code to query the features which is working fine.
var query = layer.createQuery();
query.where = "key= " + dataItem.key+ "";
query.returnGeometry = true;
query.returnCentroid = true;
query.returnQueryGeometry = true;
layer.queryFeatures(query).then(function (results) {
//I am getting the feature results here.
//trying to navigate to feature and open popup
});
Note: I tried using the following code from documentation which is working fine but I don't have the center as the features are polylines in my case.
view.goTo({center: [-126, 49]})
First, View goTo method has several options, including just using a geometry wich I think would be a better option for your case, zoom to a polyline.
Second to open the popup you just need to use the open method and you can pass there the features to show.
Check this example I put for you, has both suggestions,
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#selectDiv {
height: 30px;
width: 100%;
margin: 5px;
}
#cableNameSelect {
height: 30px;
width: 300px;
}
#cableGoToButton {
height: 30px;
width: 100px;
}
#viewDiv {
height: 500px;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
</head>
<body>
<div id="selectDiv">
<select id="cableNameSelect"></select>
<button id="cableGoToButton">GO TO</button>
</div>
<div id="viewDiv">
</div>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer'
], function (Map, MapView, FeatureLayer) {
const cableNameSelect = document.getElementById("cableNameSelect");
const cableGoToButton = document.getElementById("cableGoToButton");
const map = new Map({
basemap: 'hybrid'
});
const view = new MapView({
container: 'viewDiv',
map: map,
zoom: 10,
center: {
latitude: 47.4452,
longitude: -121.4234
}
});
view.popup.set("dockOptions", {
buttonEnabled: false,
position: "top-right"
});
const layer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/cables/FeatureServer/0",
popupTemplate: {
title: "{NAME}",
outFields: ["*"],
content: [{
type: 'fields',
fieldInfos: [
{
fieldName: "length"
},
{
fieldName: "owners"
},
{
fieldName: "rfs"
}
]
}],
}
});
map.add(layer);
layer.queryFeatures({
where: "1=1",
outFields: ["Name"],
returnGeometry: false
}).then(function(results) {
for(const graphic of results.features) {
cableNameSelect.appendChild(new Option(graphic.attributes.Name, graphic.attributes.Name));
}
});
cableGoToButton.onclick = function() {
if (!cableNameSelect.value) {
return;
}
cableGoToButton.disabled = true;
layer.queryFeatures({
where: `Name='${cableNameSelect.value}'`,
outFields: ["*"],
returnGeometry: true
}).then(function (results) {
cableGoToButton.disabled = false;
if (!results.features) {
return;
}
view.goTo(results.features[0].geometry);
view.popup.open({
features: [results.features[0]]
})
})
};
});
</script>
</body>
</html>
I have a problem with this plugin. I want to double click on nodes and the id of nodes should be displayed in console. I added the link of this extension from https://github.com/fixpoint/cytoscape-dblclick and followed by this post Cytoscape js - Call a function whenever a node is clicked, but still is not working.
Is anybody have any idea why it is not working, it would be nice if you share it.
You can see my code:
$(function() {
var elements = {
nodes: [
],
edges: [
]
};
function randomNumber(a) {
return Math.floor(Math.random() * (a));
}
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function() {},
style: [{
selector: "node", //edge
style: {
content: "data(id)",
shape: "roundrectangle", //square, circle
"text-valign": "center",
"text-halign": "center",
height: "60px", //new
width: "100px", //new
//padding: "10px", //new
"text-wrap": 'wrap', //new
color: "#fff",
"background-color": "#11479e",
// "background-color": "data(faveColor)"
}
},
{
//arrows
selector: "edge",
style: {
"curve-style": "taxi",
//'background-color': '#008000',
width: 4,
"target-arrow-shape": "triangle",
"line-color": "#9dbaea",
"target-arrow-color": "#9dbaea"
}
}
],
});
cy.dblclick();
cy.on('dblclick', function(evt) {
console.log('dblclick');
cy.animate({
fit: {
eles: evt.target,
padding: 10,
},
});
});
cy.on('dblclick:timeout', function(evt) {
console.log('dblclick:timeout');
});
var ab = 12;
for (var i = 0; i < ab; i++) {
//elements.nodes.push({ "data": { "id": i } });
cy.add([{
group: "nodes",
data: {
id: i
}
}
])
}
var cb = 20;
for (var i = 0; i < cb; i++) {
cy.add([{
group: "edges",
data: {
source: randomNumber(ab),
target: randomNumber(ab)
}
}])
}
cy.layout({
name: "dagre", //dagre, grid
directed: true,
nodeDimensionsIncludeLabels: true,
boxSelectionEnabled: true,
autounselectify: true,
zoomingEnabled: true,
userZoomingEnabled: true,
styleEnabled: true
}).run();
cy.elements().qtip({
content: function() {
return 'Text, Test ' + this.id()
},
position: {
my: 'center left', //top center
at: 'center right' //bottom center
},
style: {
classes: 'qtip-bootstrap', //qtip-dark
tip: {
width: 16,
height: 10
}
}
});
// });
}); //end
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
<!DOCTYPE>
<html>
<head>
<title>cytoscape-panzoom.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link href="cytoscape.js-panzoom.css" rel="stylesheet" type="text/css" />
<link href="font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!-- partial -->
<script src="https://js.cytoscape.org/js/cytoscape.min.js"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
<!-- qtip Links -->
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!-- <script src="../cytoscape.js/build/cytoscape.js"></script> -->
<script src="https://unpkg.com/cytoscape-dblclick/dist/index.js"></script>
<script src="cytoscape-panzoom.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Just follow the post you already linked and log the node information instead of fitting the graph to the clicked node. Also, your demo had some static scripts in the header, I removed them for that reason. That way, the qtip works again too:
$(function() {
var elements = {
nodes: [
],
edges: [
]
};
function randomNumber(a) {
return Math.floor(Math.random() * (a));
}
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function() {},
style: [{
selector: "node", //edge
style: {
content: "data(id)",
shape: "roundrectangle", //square, circle
"text-valign": "center",
"text-halign": "center",
height: "60px", //new
width: "100px", //new
//padding: "10px", //new
"text-wrap": 'wrap', //new
color: "#fff",
"background-color": "#11479e",
// "background-color": "data(faveColor)"
}
},
{
//arrows
selector: "edge",
style: {
"curve-style": "taxi",
//'background-color': '#008000',
width: 4,
"target-arrow-shape": "triangle",
"line-color": "#9dbaea",
"target-arrow-color": "#9dbaea"
}
}
],
});
cy.dblclick();
cy.on('dblclick', function(evt) {
console.log(evt.target.id());
});
var ab = 12;
for (var i = 0; i < ab; i++) {
//elements.nodes.push({ "data": { "id": i } });
cy.add([{
group: "nodes",
data: {
id: i
}
}
])
}
var cb = 20;
for (var i = 0; i < cb; i++) {
cy.add([{
group: "edges",
data: {
source: randomNumber(ab),
target: randomNumber(ab)
}
}])
}
cy.layout({
name: "dagre", //dagre, grid
directed: true,
nodeDimensionsIncludeLabels: true,
boxSelectionEnabled: true,
autounselectify: true,
zoomingEnabled: true,
userZoomingEnabled: true,
styleEnabled: true
}).run();
cy.elements().qtip({
content: function() {
return 'Text, Test ' + this.id()
},
position: {
my: 'center left', //top center
at: 'center right' //bottom center
},
style: {
classes: 'qtip-bootstrap', //qtip-dark
tip: {
width: 16,
height: 10
}
}
});
// });
}); //end
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
<!DOCTYPE>
<html>
<head>
<title>cytoscape-panzoom.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<!--<link href="cytoscape.js-panzoom.css" rel="stylesheet" type="text/css" />-->
<!--<link href="font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css" />-->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!-- partial -->
<script src="https://js.cytoscape.org/js/cytoscape.min.js"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
<!-- qtip Links -->
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!-- <script src="../cytoscape.js/build/cytoscape.js"></script> -->
<script src="https://unpkg.com/cytoscape-dblclick/dist/index.js"></script>
<!--<script src="cytoscape-panzoom.js"></script>-->
</head>
<body>
<div id="cy"></div>
</body>
</html>
I try to take snapshot from webcam on web browser. When I use this code below it works on mobile (Google Chrome on Android), but not on Google Chrome on Desktop. The video is not displayed. I get an error name: TrackStartError or DevicesNotFoundError. It was tested with external USB webcam.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0 auto;
max-width: 480px;
}
video, img {
max-width: 100%;
background-color: #f2f3f5;
}
video {
height: 400px;
}
</style>
</head>
<body>
<div id="container">
<video autoplay></video>
</div>
<script>
var video = document.querySelector('video'), canvas;
function takeSnapshot() {
var img = document.querySelector('img') || document.createElement('img');
var context;
var width = video.offsetWidth, height = video.offsetHeight;
canvas = canvas || document.createElement('canvas');
canvas.width = width;
canvas.height = height;
context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);
}
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
var constraints = {audio: false, video: {width: 640, height: 480}};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
if ("srcObject" in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function (e) {
video.play();
};
video.addEventListener('click', takeSnapshot);
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
});
</script>
</body>
</html>
I'm out of any options :(
What I'm doing wrong? It should work on most used desktop web browsers.
Try this (just work for videos):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(err0r) {
console.log("Something went wrong!");
});
}
</script>
</body>
</html>
Reference: https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm
Most probably your webcam or webcam drivers are not functioning correctly.
That's what the 2 errors that you're getting point to:
DevicesNotFoundError is a non spec error thrown by Chrome when you’re requesting a video track (through constraints) but a webcam is missing. The Firefox/spec equivalent is NotFoundError.
TrackStartError is a non spec error thrown by Chrome (on Windows) when the webcam is already in use by another app. The Firefox/spec equivalent is NotReadableError. The MDN description points to other causes as well:
Although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or Web page level which prevented access to the device
Source: Common getUserMedia() Errors
My map is showing all of the data in a fusion table when I would like to restrict it.
Also, how would I query by the 'Geographic Name' field? I tried the query below but it would not work.
***Edit I solved the problem below by using code similar to this:
select: 'State Abbr.',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa',
where: "'State Abbr.' = 'FL'",
The issue was the lack of quotations.
Any assistance is appreciated!
select: 'State-County',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa',
where: 'State-County = AL-Autauga'
Here is my code currently:
****Edit: I have fixed the issue below by updating the code as follows
query: {
select: 'GEO_ID',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa',
where: "GEO_ID = '05000US01001'"
},
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<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;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var geocoder;
var map;
var layer;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(34.0754, -84.2946);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'GEO_ID',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa',
where: 'GEO_ID = 05000US01001'
},
supressInfoWindows: true,
styles: [
{polygonOptions: {fillColor:'#0040FF',fillOpacity:0.1,strokeColor:'#FF0000',strokeWeight:2,strokeOpacity:0.6 }}
]
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input id="address" type="textbox" value="Alpharetta, Georgia">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</div>
</body>
</html>
Link to Fusion Table: https://www.google.com/fusiontables/data?docid=1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa#rows:id=3