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/

Google Maps with Dart

see how easy and fun it is to use the Google Maps JS API with Dart, using Alexandre Ardhuin's excellent Dart Google Maps library!

Library on GitHub:
https://github.com/a14n/dart-google-maps

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.

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

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.

Tile5 - opensource HTML5 mapping javascript library

Tile5 is an opensource HTML5 mapping javascript library that gives developers the ability to use existing mapping engines and provide a rich HTML5 experience. Tile5 can also be used to create more generic HTML5 tiling interfaces. 


Tile5 is targeted primarily at mobile devices that support HTML5. The goal is to achieve compatibility with all mobile devices considered “Class A” on the jQuery Mobile GBS chart. Longer term intend to support the various desktop browsers as well (some even work right now).

Tile5 Code Playground

New options for the Maps Ad Unit

Google have provided ways to add AdSense to Google Maps via the Maps Ad Unit, to monetize sites that use the Google Maps API. And now, Google are adding two new extensions to that feature. This means more choices for ads with your maps and an improved experience for your users.

Know more: Google Geo Developers Blog

Google I/O 2012 - Maps for Good

Developers are behind many cutting-edge map applications that make the world a better place. In this session we'll show you how developers are using Google Earth Builder, Google Earth Engine, Google Maps API and Android apps for applications as diverse as ethno-mapping of indigenous cultural sites, monitoring deforestation of the Amazon and tracking endangered species migrations around the globe. Come learn about how you can partner with a non-profit to apply for a 2012 Developer Grant and make a positive impact with your maps.

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

OpenLayers: set center of map and zoom level

Modify from last post "Example to load OSGEO map using OpenLayers"; to set center of map and zoom level, replace the code myMap.zoomToMaxExtent() by:
myMap.setCenter(new OpenLayers.LonLat(<Lon, Lat>)); 
myMap.zoomTo(<zoom level>);

Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Mobile-Web-App</title>
 <script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
 <script type="text/javascript" >
  var myMap;
  
  function loadOpenLayers(){  
  
   myMap = new OpenLayers.Map("mymap", {});
   
   var wms = new OpenLayers.Layer.WMS(
    "OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0",
    {layers: "basic"},
    {});
    
   myMap.addLayer(wms);

   myMap.setCenter(new OpenLayers.LonLat(-122.349243, 47.651743));
   myMap.zoomTo(6);   
  } 
 
 </script>
</head>
<body onload="loadOpenLayers();">
 <h1>Mobile-Web-App</h1>
 <p>Load osgeo map using OpenLayers</p>
 <div id="mymap" style="width: 250px; height: 250px; border: 1px solid;">
 </div>

</body>
</html>

Example to load OSGEO map using OpenLayers

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Mobile-Web-App</title>
 <script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
 <script type="text/javascript" >
  var myMap;
  
  function loadOpenLayers(){  
  
   myMap = new OpenLayers.Map("mymap", {});
   
   var wms = new OpenLayers.Layer.WMS(
    "OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0",
    {layers: "basic"},
    {});
    
   myMap.addLayer(wms);

   myMap.zoomToMaxExtent();   

  } 
 
 </script>
</head>
<body onload="loadOpenLayers();">
 <h1>Mobile-Web-App</h1>
 <p>Load osgeo map using OpenLayers</p>
 <div id="mymap" style="width: 250px; height: 250px; border: 1px solid;">
 </div>

</body>
</html>

Next: - OpenLayers: set center of map and zoom level

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>

Nokia Maps for mobile web

Visit m.maps.nokia.com with your device to try Nokia Maps for mobile web.

supported device -

• Mobile Devices:
  - iOS 4.3+ (mobile Safari)
  - Android 2.2, 2.3
  - Blackberry 6.0+ (experimental)
  
• Desktop:
  - Safari
  - Chrome
  

What’s inside?
- Voice guidance for walk navigation
- Fast, easy to use maps for exploring neighbourhoods and more
- Loads of useful information for discovering places nearby and far away
- Opinions and reviews from others to help you get a feel for a place
- Highlights and tips from popular travel guides
- Image galleries so you can enjoy a visual preview of a place
- Easy place sharing through SMS, Facebook, Twitter or email
- Clear and accurate walking and driving routes
- “Save your Favourites” feature so you can take places with you
- View your position on the map to explore what's nearby

Details: http://betalabs.nokia.com/apps/nokia-maps-for-mobile-web

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

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>

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