Google Maps Platform

Streamlining code in the JavaScript Maps API

Thursday, March 13, 2014

Since the Google Maps JS API v3 launched in 2009, we have added lots of new features. And we’ve also made occasional modifications to the API to minimize and simplify common code pathways for developers.

Today we want to announce two small, but useful, changes we have recently made. The first lessens the amount of code required to create a map. The second evolves the API towards a more standard pattern of using plain JavaScript objects.

The first change was introduced quietly a few versions ago, and made the Map Type an optional parameter (defaulting to the standard ROADMAP type) when instantiating a new map.

The second change is available in versions 3.16 of the API and above, and introduces a new way of creating a location: instead of google.maps.LatLng(37.5, -122.5), you can now simply pass in a plain JavaScript object like {lat: 37.5, lng: -122.5}.

Let’s take a look at how these changes affect the original code from our launch announcement above:

Original:
var myOptions = {
     zoom: 8,
     center: new google.maps.LatLng(-34.397, 150.644),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };

New
   var myOptions = {
     zoom: 8,
     center: {lat: -34.397, lng: 150.644}
   };

Note that since the order of the values no longer matters, the following is equally valid:
     center: {lng: 150.644, lat: -34.397}
The end result is less code needed to instantiate a basic map, less opportunity for confusion regarding coordinate ordering, and a more flexible way to create locations.

Note that google.maps.LatLng will continue to work, and there’s no need to modify any of your existing code. These new features are simply designed to help those getting started, and help you create more streamlined and readable code.

As always, we love to get feedback on how even minor changes like this affect your workflow. You can comment on this post or on our Google+ Page. And as always, you can get help on StackOverflow. Check out our support page for the right tags to use.Posted by Josh Livni, Maps API Team

Map of the Week: Hill Mapper San Francisco

Wednesday, July 31, 2013

Map of the Week: Hill Mapper San Francisco

Hill Mapper San Francisco uses the Elevation API to show how steep streets are in San Francisco.

Streets that go uphill, relative to the current location of the marker, are red, and downhill streets are blue. The opacity of the color represents how steep the hill is.

If you drag around the marker, the Polylines change color, as the marker’s elevation changes the relative elevation of the streets.

It’s particularly powerful if you view it with satellite imagery.

If you want to search for a particular location, the search box uses Places Autocomplete to help you find it.

All around, this is a nice, innovative use of our APIs to show off useful information.
Posted by Mano Marks, Maps Developer Relations Team

Introducing the Store Locator Utility Library

Monday, March 26, 2012

Store Locator utility librarycustom markersstyling mapsproject homepageApache 2 licensePosted by Chris Broadfoot, Google Maps Developer Relations team

Fab Friday: Three Quick Links

Friday, February 10, 2012

Google Vector Layers: “Google Vector Layers allows you to easily add one or more vector layers from a number of different geo web services to a Google Maps API based application. Currently there's support for ArcGIS Server, Arc2Earth, GeoIQ and CartoDB with more planned.”jsFiddle: “jsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.” Many people are starting to use jsFiddle get help debugging their code in developer forums.Tips for approaching Google Developer Advocates: I posted this on Google Plus, thought it might be helpful.Posted by Mano Marks, Maps Developer Relations team

Maps Platform

Streamlining code in the JavaScript Maps API

Map of the Week: Hill Mapper San Francisco

Introducing the Store Locator Utility Library

Fab Friday: Three Quick Links

Labels

Archive

Feed

Company-wide

Products

Developers