Maps Platform
Product updates, customer stories, and tips and tricks on Google Maps Platform
Turning down the Flash Maps API
Tuesday, August 12, 2014
Alert!
On September 2nd of this year the
three year deprecation
period for the Google Maps API for Flash will come to a close and the API will be turned off on that date. We encourage developers of existing applications to migrate to
JavaScript Maps API v3
as soon as possible.
Over the past 3 years we’ve added numerous additional features to v3, such as
elevation
,
cycling and transit directions
,
symbols
, and support for
GeoJSON
,
making it our most powerful and well used Maps API ever. Developers looking to migrate to the JavaScript Maps API v3 can find answers to any questions they have on
StackOverflow
. Our
support page
has the right StackOverflow tags to peruse.
Alternatively, if you are a Maps API for Business customer you can get help through the
Enterprise support portal
(check the Resources tab).
Posted by
Mano Marks
, Developer Relations Team
Putting your Professional Group on the Map
Wednesday, July 9, 2014
People love to know what’s happening in their area of expertise around the world. What better way to show it, than on a map?
Tech Comm on a Map
puts technical communication tidbits onto an interactive map, together with the data and functionality provided by Google Maps.
I’m a technical writer at Google. In this post I share a project that uses the new Data layer in the Google Maps JavaScript API, with a Google Sheets spreadsheet as a data source and a location search provided by Google Places Autocomplete.
Although this project is about technical communication, you can easily adapt it for other special interest groups too. The code is on
GitHub
.
The map in action
Visit
Tech Comm on a Map
to see it in action. Here’s a screenshot:
The colored circles indicate the location of technical communication conferences, societies, groups and businesses. The “other” category is for bits and pieces that don’t fit into any of the categories. You can select and deselect the checkboxes at top left of the map, to choose the item types you’re interested in.
When you hover over a circle, an info window pops up with information about the item you chose. If you click a circle, the map zooms in so that you can see where the event or group is located. You can also search for a specific location, to see what’s happening there.
Let’s look at the building blocks of
Tech Comm on a Map
.
Getting hold of a map
I'm using the
Google Maps JavaScript API
to display and interact with a map.
Where does the data come from?
When planning this project, I decided I want technical communicators to be able to add data (conferences, groups, businesses, and so on) themselves, and the data must be immediately visible on the map.
I needed a data entry and storage tool that provided a data entry UI, user management and authorization, so that I didn’t have to code all that myself. In addition, contributors shouldn’t need to learn a new UI or a new syntax in order to add data items to the map. I needed a data entry mechanism that is familiar to most people – a spreadsheet, for example.
In an episode of
Google Maps Developer Shortcuts
,
Paul Saxman
shows how to pull data from Google Drive into your JavaScript app. That’s just what I needed. Here’s how it works.
The data for
Tech Comm on a Map
is in a Google Sheets spreadsheet. It looks something like this:
Also in the spreadsheet is a
Google Apps Script
that outputs the data in JSON format:
var SPREADSHEET_ID = '[MY-SPREADSHEET-ID]';
var SHEET_NAME = 'Data';
function doGet(request) {
var callback = request.parameters.jsonp;
var range = SpreadsheetApp
.openById(SPREADSHEET_ID)
.getSheetByName(SHEET_NAME)
.getDataRange();
var json = callback + '(' +
Utilities.jsonStringify(range.getValues()) + ')';
return ContentService
.createTextOutput(json)
.setMimeType(ContentService.MimeType.JAVASCRIPT);
}
Follow these steps to add the script to the spreadsheet and make it available as a web service:
In Google Sheets, choose ‘Tools’ > ‘Script Editor’.
Add a new script as a blank project.
Insert the above code.
Choose ‘File’ > ‘Manage Versions’, and name the latest version of the script.
Choose ‘Publish’ > ‘Deploy as web app’. Make it executable by ‘anyone, even anonymous’. Note: This means anyone will be able to access the data in this spreadsheet via a script.
Choose ‘Deploy’.
Copy the URL of the web service. You’ll need to paste it into the JavaScript on your web page.
In your JavaScript, define a variable to contain the URL of the Google Apps script, and add the JSONP callback parameter:
var DATA_SERVICE_URL =
"https://script.google.com/macros/s/[MY-SCRIPT-ID]/exec?jsonp=?";
Then use jQuery’s Ajax function to fetch and process the rows of data from the spreadsheet. Each row contains the information for an item: type, item name, description, website, start and end dates, address, latitude and longitude.
$.ajax({
url: DATA_SERVICE_URL,
dataType: 'jsonp',
success: function(data) {
// Get the spreadsheet rows one by one.
// First row contains headings, so start the index at 1 not 0.
for (var i = 1; i < data.length; i++) {
map.data.add({
properties: {
type: data[i][0],
name: data[i][1],
description: data[i][2],
website: data[i][3],
startdate: data[i][4],
enddate: data[i][5],
address: data[i][6]
},
geometry: {
lat: data[i][7],
lng: data[i][8]
}
});
}
}
});
The new Data layer in the Maps JavaScript API
Now that I could pull the tech comm information from the spreadsheet into my web page, I needed a way to visualize the data on the map. The new
Data layer
in the Google Maps JavaScript API is designed for just such a purpose. Notice the method
map.data.add()
in the above code. This is an instruction to
add a feature
in the Data layer.
With the basic JavaScript API you can add separate objects to the map, such as a polygon, a marker, or a line. But by using the Data layer, you can define a collection of objects and then manipulate and style them as a group. (The Data layer is also designed to play well with GeoJSON, but we don’t need that aspect of it for this project.)
The tech comm data is represented as a series of features in the Data layer, each with a set of
properties
(type, name, address, etc) and a
geometry
(latitude and longitude).
Style the markers on the map, with different colors depending on the data type (conference, society, group, etc):
function techCommItemStyle(feature) {
var type = feature.getProperty('type');
var style = {
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
strokeWeight: 3,
scale: 10
},
// Show the markers for this type if
// the user has selected the corresponding checkbox.
visible: (checkboxes[type] != false)
};
// Set the marker colour based on type of tech comm item.
switch (type) {
case 'Conference':
style.icon.fillColor = '#c077f1';
style.icon.strokeColor = '#a347e1';
break;
case 'Society':
style.icon.fillColor = '#f6bb2e';
style.icon.strokeColor = '#ee7b0c';
break;
. . . SNIPPED SOME DATA TYPES FOR BREVITY
default:
style.icon.fillColor = '#017cff';
style.icon.strokeColor = '#0000ff';
}
return style;
}
Set listeners to respond when the user hovers over or clicks a marker. For example, this listener opens an info window on hover, showing information about the relevant data item:
map.data.addListener('mouseover', function(event) {
createInfoWindow(event.feature);
infoWindow.open(map);
});
The Place Autocomplete search
The last piece of the puzzle is to let users search for a specific location on the map, so that they can zoom in and see the events in that location. The location search box on the map is provided by the
Place Autocomplete
widget from the Google Places API.
What’s next?
Tech Comm on a Map is an ongoing project. We technical communicators are using a map to document our presence in the world!
Would you like to contribute? The code is on
GitHub
.
Posted by
Sarah Maddox
, Google Developer Relations team.
Recap of Google Maps at I/O 14
Monday, July 7, 2014
Maps had a great I/O 2014, with four sessions and three I/O Bytes. Not to mention all the partners in the sandbox who were using the Maps API!
For those who want to relive Google I/O, or catch up on sessions you missed, we’ve created a playlist of Maps videos:
Enjoy watching, and happy mapping!
Posted by Mano Marks, Developer Relations Team
Maps at I/O'14
Tuesday, June 24, 2014
Google I/O starts tomorrow, and as always, Google Maps is a big part of the show. The team has been working hard to give developers a great experience. We’re looking forward to seeing you there, or your comments online on our videos. There will be lots of maps engineers, developer relations team members, product managers and more around I/O. So if you’re there, find us, say hi and show us your apps!
We’ve already released one video (embedded below). Watch the I/O Bytes 2014 channel for more to come. Also in this post is a tantalizing glimpse into four of our I/O sessions.
Video
Map Up your Apps!
with Megan Boundey
Interested in adding Google Maps to your mobile apps but needing inspiration? Did you know that you can now add Street View to your apps too? See how incorporating maps into your app can delight your users! We'll show you some exciting uses of the Google Maps Mobile APIs and describe the functionality available in the APIs as we go.
Sessions
The first three sessions are available by livestream, and all sessions will be available on YouTube in the
Google Developers Channel
after I/O.
Views from Everywhere: Bringing developers the world's largest geo photo library
with
Evan Rapoport
,
Luc Vincent
Google Maps is creating the world's most comprehensive geolocated photo library through Street View. We're also empowering anyone to contribute photos and 360-degree panoramas to Google Maps via products like Trekker, Business View, Views, and Photo Sphere. In this talk, we'll show how developers can integrate billions of panoramas into their projects. We'll also show how anyone can quickly publish imagery of places they care about, then easily access them via our APIs and viewers. This session is relevant to developers creating experiences that include location and imagery.
Maps for good: Saving trees and saving lives with petapixel-scale computing
with
Rebecca Moore
Satellites have been systematically collecting imagery of our changing planet for more than 40 years, yet until recently this treasure trove of “big data” has not been online and available for high-performance data mining. This session will cover the new Google Earth Engine technology and experimental API for massively-parallel geospatial analysis on daily-updating global datasets such as Landsat satellite imagery. Scientists and other domain experts are developing new EE-powered applications which map, measure and monitor our changing planet in unprecedented detail, for the benefit of people and the environment. Applications include tracking and reducing global deforestation; mapping and mitigating the risks of earthquakes and extreme weather events such as floods and drought; and even creating new kinds of geo-visualizations such as the 2014 Webby award-winning “Timelapse” - a zoomable, browsable HTML5 video animation of the entire Earth from 1984-2012, built from nearly a petabyte of Landsat data. These early results merely hint at what’s now possible.
Redesigning Google Maps
with
Jonah Jones
,
Annette Leong
How do you redesign a product used by a billion people? The Google Maps team recently launched their biggest redesign since the product was introduced 8 years ago. The lead designers will take you through the journey, illustrating three lessons learned that can apply to any design and product development process.
How 20% engineers built Santa Tracker
with
Chris Broadfoot
and
Ankur Kotwal
Built on Google’s developer platform, Santa Tracker lets millions of children and adults track Santa in 34 languages as he delivers presents across the world. The project’s technical leads go behind the scenes to provide insight into the challenges of building a cohesive Google developer platform experience across mobile/desktop web, Android, Chromecast, Maps and Search; all powered by a Go AppEngine backend.
See you at I/O, or online at
+GoogleMapsAPI
and
@GoogleMapsAPI
.
Posted by
Mano Marks
, Developer Relations Team
New Place IDs and Add-a-Place features in the Places API!
Monday, June 23, 2014
With rich
autocomplete
and
place search
functionality, the Google Places API includes several powerful features to find, discover, and interact with the world’s places. Now we’re making it even easier for developers to work with places by launching Place IDs and enhancements to our
Add-a-Place
functionality!
Place IDs
Until today, Places API developers had to work with a dual-ID system: IDs (
id
) were used to compare places and References (
reference
) were for fetching a place’s information. The new Place IDs (
place_id
) can serve both those purposes, and are also shorter and simpler than the typically long and unwieldy References.
With today’s launch, Place IDs will be returned in all responses that include the existing ID and Reference fields, and they can also be used instead of References to uniquely identify a place in
Place Details requests
. We believe Place IDs have clear functional and simplicity benefits over the previous ID and Reference system, and we’ll be removing IDs and Reference support from the Places API a year from now, on June 24th, 2015.
Add-a-Place
While Google strives to bring developers the freshest local data, sometimes users know about places before we do, and we want to make sure they can add and interact with new places right away. That’s why the Places API has an Add-a-Place feature, that with today’s update, can also include a new place’s
address, website, and phone number in the
request.
This additional data will be automatically associated and returned with the new place, so end-users can benefit from additional useful place information without forcing developers to store extra data. The new fields also help streamline Google’s internal place moderation process, which augments Google’s places repository with places added via the Places API, leading to more up-to-date, comprehensive, and accurate local data for everyone.
A great example of how to integrate the Add-a-Place feature is
Zodio
, a popular social location-based app from Thailand. They use the Places API’s Add-a-Place feature in their check-in experience so their users can always share where they are, even if the place is currently missing from the Places API.
Please visit our
developer documentation
to learn more about the Places API. As you build the next awesome location-based app, please post any questions to our
StackOverflow
community and send us feedback via the
Google Maps API Issue Tracker
.
Posted by
David McLeish
and
Kevin Tran
, Software Engineers, Google Places API
Labels
5 Great Maps
ads
advertising
africa
Andorra
Android
App Engine
art
Australia
Autocomplete
Boston
brazil
Bruce Springsteen
Bulgaria
Campus Map
Chrome
City 24/7
Code for America
COM API
Computerlogy
creative advertising campaigns
Custom Map Types
design
developer
Developer Challenge
Developer stories
Directions API
Drawing Tools
Driving Directions
Earth
Earth API
Elevation API
environment
epungo
Estonia
Europe
Fab Friday
flash
Fusion Tables
GAE
games
GDAL
Gears
geo
Geodesic Lines
Germany
Gibraltar
GIS
Global Economy
gme
Google Analytics
Google App Engine
Google Earth
Google Earth API
Google I/O
Google Maps
Google Maps API
Google Maps Engine
Google Places API
Google Places API Developer Challenge
Google Street View API
government
Hackathon
Hamburg
heat map
heatmap
hiking
Hungary
iOS
JavaScript
jQuery
kenya
KML
Latitude API
Latvia
launch
Lithuania
local search
London
Mac
Map of the Week
maps
Maps API
Maps API for Flash
Maps Data API
Maps Zen
Marker Clusterer
Marketing
Mars
meetup
mobile
moca
modern art
More Than a Map
Morethanamap
Movies
Neighborhoods
New York City
Office Hours
Olympics
Panoramio
photos
Place Summaries
Places API
Plus
polygons
Premier
public transit
public transit layer
Python
real estate
rock
sao paulo
screencast
SketchUp
Slovakia
Slovenia
South Africa
Spain
Spatial Data Files
Static Maps API
street view
Styled Maps
Sydney
Track
traffic layer
Transportation
Tripline
Twitter
UN
United Nations
V3
Vancouver Olympics
visualizations
Volkswagen
VW
web
youtube
Archive
2018
Nov
Jul
Jun
May
Mar
Feb
2017
Nov
Jun
May
Apr
Mar
Feb
Jan
2016
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Feb
2015
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2014
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
2013
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2012
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2011
Dec
Nov
Oct
Sep
Aug
Jul
May
Apr
Mar
Feb
Jan
2010
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2009
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2008
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Feed
Follow @GMapsPlatform
Follow
Google Maps Platform Website
Give us feedback in our
Product Forums
.