Mobile-Web-App: Google APIs

Showing posts with label Google APIs. Show all posts

Wednesday, June 18, 2014

Polymer: Interacting with Google Services with HTML only

Google has over 250 APIs and services. Every API is different! Eric Bidelman shows you how you can interact with Google services without writing code!

Monday, September 30, 2013

Getting started with the Google Maps SDK for iOS

This is a three part series to introduce the Google Maps SDK for iOS.

The series covers:
1) Setting up your development environment
2) Getting and testing an API key
3) Creating your first application

Saturday, September 7, 2013

Obtaining a simple API key for use with the YouTube API

Obtaining a simple API key for use with the YouTube API

This tutorial demonstrates how to create a project in the Google API console and enable the YouTube Data and Analytics APIs for use with the YouTube API sample code. This tutorial covers creating a Simple API key.

This is a shorter version of another tutorial, "Obtaining a developer key for use with the YouTube Data and Analytics API", which includes instructions on setting up an OAuth 2.0 client ID and secret. That video can be found here: http://youtu.be/Im69kzhpR3I.

Friday, June 28, 2013

Google Maps Javascript API Version 3 is now the official Javascript API

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. You are encouraged to migrate your code to this newly updated and enhanced version!

https://developers.google.com/maps/documentation/javascript/

Thursday, June 6, 2013

How to Build Multi-Platform Maps with Google'€™s APIs

Google I/O 2013 - How to Build Multi-Platform Maps with Google'€™s APIs
The Google Maps API is now on multiple platforms, JavaScript, Android, and iOS. Each platform has itâ€™s own special strengths and limitations, and requires special attention. But what if youâ€™re building for all three platforms? How do you approach that problem? This session will look at the specialized development for the individual platforms versus generalized development for all three, and the trade offs inherent in each different approach. We will look at when to use our web services, and how to build a strong back-end infrastructure.

Friday, May 3, 2013

Embed Photo Spheres on Your Website

Google launched a web site (https://developers.google.com/panorama/web/) for developer to embed Photo Spheres to any web site. It shows how to easily embed photo spheres on any website with an interactive, 360-degree panorama viewer.

Monday, April 29, 2013

Google Maps JavaScript API v2 will shutdown on November 19, 2013

Google Maps JavaScript API v2 will shutdown on November 19, 2013. On that date, Google will attempt to automagically turn remaining v2 maps into v3 maps, by way of a JavaScript wrapper Google will deploy. Expect this wrapper to work for most simple maps, but to avoid any last minute surprises it is strongly encouraged sites to complete their migration to v3 ahead of this date. Google have prepared an upgrade guide to help make the migration process as painless as possible.

Source and details: Google Geo Developers Blog - An update on the JavaScript Maps API v2 deprecation

Thursday, October 4, 2012

Google launch a new web site, morethanamap

Google launch a new web site, http://www.morethanamap.com/, to demonstrate the capabilities and feature of Google Map API, and how developers are using it.

Friday, September 28, 2012

Google Web Search API (Deprecated)

The Google Web Search API lets you put Google Search in your web pages with JavaScript. You can embed a simple, dynamic search box and display search results in your own web pages or use the results in innovative, programmatic ways.

Note: The Google Web Search API has been officially deprecated. It will continue to work as per Google's deprecation policy, but the number of requests you may make per day will be limited. Therefore, you are encouraged to move to the new Custom Search API.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Hello World - Google  Web Search API Sample</title>
    <script src="https://www.google.com/jsapi"
        type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">
    //<!
    google.load('search', '1');

    function OnLoad() {
      // Create a search control
      var searchControl = new google.search.SearchControl();

      // Add in a full set of searchers
      var localSearch = new google.search.LocalSearch();
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new google.search.WebSearch());
      searchControl.addSearcher(new google.search.VideoSearch());
      searchControl.addSearcher(new google.search.BlogSearch());
      searchControl.addSearcher(new google.search.NewsSearch());
      searchControl.addSearcher(new google.search.ImageSearch());
      searchControl.addSearcher(new google.search.BookSearch());
      searchControl.addSearcher(new google.search.PatentSearch());

      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

      // execute an inital search
      searchControl.execute("mobile-web-app.blogspot.com");
    }
    google.setOnLoadCallback(OnLoad);

    //]]>
    </script>
  </head>
  <body>
    <div id="searchcontrol">Loading</div>
  </body>
</html>

Thursday, July 19, 2012

YouTube Upload Widget for your website

The YouTube Upload Widget lets your website's visitors perform both webcam and file uploads to YouTube. The support for webcam uploads sets the upload widget apart from the other uploading options that the YouTube API supports. The widget uses HTML5's postMessage support to send messages back to your website regarding videos uploaded via the widget.

The YouTube Upload Widget is an experimental feature, which means that it is still in development and subject to change or even be removed without notice.

Link: YouTube Upload Widget

Saturday, June 23, 2012

Google lower price of Google Maps API

Google lower Maps API usage fees and simplifying limits for both Styled and regular maps. Here are the details:

Changes to pricing. While the Maps API remains free for the vast majority of sites, some developers were worried about the potential costs. In response, we have lowered the online price from US $4 per 1,000 map loads to 50¢ per 1,000 map loads.
Simplified limits. We’re eliminating the previous distinction between Styled Maps and regular unstyled maps. The same usage limits and pricing now apply to applications using Styled Maps and the default Google Maps style.

Source: Google Geo Developers Blog -Lower pricing and simplified limits with the Google Maps API

Monday, April 2, 2012

Google Feed API

With Google Feed API, you can download any public Atom, RSS, or Media RSS feed using only JavaScript.

The Google Feed API takes the pain out of developing mashups in JavaScript because you can now mash up feeds using only a few lines of JavaScript, rather than dealing with complex server-side proxies. This makes it easy to quickly integrate feeds on your website.

Example:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed("http://feeds.feedburner.com/Mobile-web-app");
      feed.setNumEntries(10);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");

            var A = document.createElement("A");  
            A.setAttribute("href",entry.link);  
            A.appendChild(document.createTextNode(entry.title));  
            div.appendChild(A);
            
            container.appendChild(div);
          }
        }
      });
    }
    
    google.setOnLoadCallback(initialize);

    </script>
  </head>
  <body>
    <h1>Mobile-web-app: Google Feed API</h1>
    <div id="feed"></div>
  </body>
</html>

Wednesday, March 28, 2012

Easy to embed Google Maps with Panoramio photos

Example of using Google Maps Javascript API V3, with layer of Panoramio photos.

Link: https://google-developers.appspot.com/maps/documentation/javascript/examples/layer-panoramio HTML Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Panoramio Layer</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <link href="/maps/documentation/javascript/examples/default.css"
      rel="stylesheet" type="text/css">
    <style type="text/css">
      #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 type="text/javascript"
      src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=panoramio"></script>
    <script type="text/javascript">
      function initialize() {
        var myOptions = {
          zoom: 16,
          center: new google.maps.LatLng(47.651743, -122.349243),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

        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>

Google Weather Map JavaScript

It's a example from Google Code Playground for Weather Map.

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Sample</title>
    <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
    <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"></script>
    <script type="text/javascript">

    var IMAGES = [ "sun", "rain", "snow", "storm" ];
    var ICONS = [];
    var map = null;
    var mgr = null;
    
    function setupMap() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.setCenter(new GLatLng(48.25, 11.00), 4);
        map.enableDoubleClickZoom();
        window.setTimeout(setupWeatherMarkers, 0);
      }
    }
    
    function getWeatherIcon() {
      var i = Math.floor(IMAGES.length*Math.random());
      if (!ICONS[i]) {
        var icon = new GIcon();
        icon.image = "http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/"
            + IMAGES[i] + ".png";
        icon.iconAnchor = new GPoint(16, 16);
        icon.infoWindowAnchor = new GPoint(16, 0);
        icon.iconSize = new GSize(32, 32);
        icon.shadow = "http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/"
            + IMAGES[i] + "-shadow.png";
        icon.shadowSize = new GSize(59, 32);
        ICONS[i] = icon;
      }
      return ICONS[i];
    }
    
    function getRandomPoint() {
      var lat = 48.25 + (Math.random() - 0.5)*14.5;
      var lng = 11.00 + (Math.random() - 0.5)*36.0;
      return new GLatLng(Math.round(lat*10)/10, Math.round(lng*10)/10);
    }
    
    function getWeatherMarkers(n) {
      var batch = [];
      for (var i = 0; i < n; ++i) {
        batch.push(new GMarker(getRandomPoint(), { icon: getWeatherIcon() }));
      }
      return batch;
    }
    
    function setupWeatherMarkers() {
      mgr = new MarkerManager(map);
      mgr.addMarkers(getWeatherMarkers(20), 3);
      mgr.addMarkers(getWeatherMarkers(200), 6);
      mgr.addMarkers(getWeatherMarkers(1000), 8);
      mgr.refresh();
    }

    </script>
  </head>
  <body onload="setupMap()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
    <div id="map" style="margin: 5px auto; width: 650px; height: 400px"></div>
    <div style="text-align: center; font-size: large;">
      Random Weather Map
    </div>
</body>
</html>

Thursday, February 23, 2012

Display Map on webpage to track location

In the previous article "Display Map of current location", we load current map of current using window.navigator.geolocation.getCurrentPosition() when page loaded. That means the map show the location when page load only, will not update when the user(or device) moved. We are going to replace it with window.navigator.geolocation.watchPosition() to get repeated position updates, to track the updated location.

<!DOCTYPE html>
<html>
<head>
<title>Mobile-Web-App: geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style>#mapcanvas { height: 360px; width: 100%}</style>

<script type="text/javascript">

if (window.navigator.geolocation) {
 window.navigator.geolocation.watchPosition(
  successCallback, errorCallback);
} else {
 alert("!!!Browser doesn't support Geolocation API.");
}

function successCallback(position){
 loadmap();
 var mylatitude = position.coords.latitude;
 var mylongitude = position.coords.longitude;
 document.getElementById("latitude").innerHTML
  = "latitude: " + mylatitude;
 document.getElementById("longitude").innerHTML
  = "longitude: " + mylongitude;
 document.getElementById("accuracy").innerHTML
  = "accuracy: " + position.coords.accuracy;
 loadmap(mylatitude, mylongitude);
}

function errorCallback(error) {
 alert(error);
}

var map;

function loadmap(mylat, mylong){
 var options = {
  zoom: 15,
  center: new google.maps.LatLng(mylat, mylong),
  mapTypeId: google.maps.MapTypeId.SATELLITE,
  };
  
 map = new google.maps.Map(document.getElementById("mapcanvas"), options);
}

</script>

</head>
<body>
<h1>Mobile-Web-App: geolocation</h1>
<div id="mapcanvas"></div>
<div>
<p id="latitude"></p>
<p id="longitude"></p>
<p id="accuracy"></p>
</div>
</body>
</html>

Display Map of current location

Combine the last two article "Embed Google Maps in web page using Javascript" and "Get device geolocation, using window.navigator.geolocation", we can display Google Maps of our current position.

<!DOCTYPE html>
<html>
<head>
<title>Mobile-Web-App: geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style>#mapcanvas { height: 360px; width: 100%}</style>

<script type="text/javascript">

if (window.navigator.geolocation) {
window.navigator.geolocation.getCurrentPosition(
 successCallback, errorCallback);
} else {
alert("!!!Browser doesn't support Geolocation API.");
}

function successCallback(position){
loadmap();
var mylatitude = position.coords.latitude;
var mylongitude = position.coords.longitude;
document.getElementById("latitude").innerHTML
 = "latitude: " + mylatitude;
document.getElementById("longitude").innerHTML
 = "longitude: " + mylongitude;
document.getElementById("accuracy").innerHTML
 = "accuracy: " + position.coords.accuracy;
loadmap(mylatitude, mylongitude);
}

function errorCallback(error) {
alert(error);
}

var map;

function loadmap(mylat, mylong){
var options = {
 zoom: 15,
 center: new google.maps.LatLng(mylat, mylong),
 mapTypeId: google.maps.MapTypeId.SATELLITE,
 };

map = new google.maps.Map(document.getElementById("mapcanvas"), options);
}

</script>

</head>
<body>
<h1>Mobile-Web-App: geolocation</h1>
<div id="mapcanvas"></div>
<div>
<p id="latitude"></p>
<p id="longitude"></p>
<p id="accuracy"></p>
</div>
</body>
</html>

next:
- Display Map on webpage to track location

Wednesday, February 22, 2012

Embed Google Maps in web page using Javascript

<!DOCTYPE html>
<html>
<head>
<title>Mobile-Web-App: Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style>
#mapcanvas { height: 360px; width: 480px}
</style>

<script>
var map;

function loadmap(){
 var options = {
  zoom: 15,
  center: new google.maps.LatLng(51.507222, -0.1275),
  mapTypeId: google.maps.MapTypeId.SATELLITE,
  };
  
 map = new google.maps.Map(document.getElementById("mapcanvas"), options);
}

</script>
</head>
<body onload="loadmap();">
<h1>Mobile-Web-App: Google Maps</h1>
<div id="mapcanvas"></div>
</body>
</html>

Saturday, February 18, 2012

jquery-ui-map: Google maps plugin for jQuery and jQuery Mobile

The Google Map version 3 plugin for jQuery and jQM takes away some of the head aches from working with the Google Map API. Instead of having to use Google event listeners for simple events like click, you can use jQuery click events on the map and markers.

It is also very flexible, highly customizable, lightweight (3.3kB or 4kB for the full) and works out of the box with jQuery mobile. But one of its best features (atleast for SEO people) is that you can populate a map from microformats, RDFa or microdata on your site, which can be used as a fallback when a user doesn't have javascript enabled.

Project Home: jquery-ui-map