Posted:
Maps give us an easy way to visualize all types of information, from patterns in health expenditure across the world, to oceans with the highest concentration of coral reefs at risk. The tools used to create these maps should be just as easy to use. That’s why, starting today, the JavaScript Maps API will support GeoJSON, making it simpler for developers to visualize richer data, with even cleaner code.

GeoJSON has emerged as a popular format for sharing location-based information on the web, and the JavaScript Maps API is embracing this open standard. This means, as a developer, you can now pull raw data from multiple data sources, such as the US Geological Survey or Google Maps Engine, and easily display it on your website.

How does it work? The new Data layer allows you to treat a dataset like… well, a set of data, rather than individual and unrelated features. If you have a GeoJSON file, you can now load it on the map simply by adding a single line of code to your JavaScript:

map.data.loadGeoJSON(‘earthquakes.json’);


Earthquakes over the past week loaded on the map

Tada! And what’s more, most places have attributes beyond just location: stores have opening times, rivers have current speed, and each Girl Guide troop has cookie selling turf. The Data layer allows you to represent all attributes in GeoJSON right on the map and make decisions about what data to display more easily.

You can use this information to create a styling function that says, “show the earthquakes as circles, scaled to their magnitude” and as the data or rules are updated, the styling will automatically be applied to every feature. This beats having to manually update each feature or rule as more information is added to the map.

Earthquakes over the past week, with a styling function applied


Earthquakes over the past week, with additional color and basemap styling applied

Get started by checking out our developer docs, the code for these earthquake maps, this cool demo showing data from different sources, and this Google Developers Live video. This is a new feature, so if you run into problems or think of any additions you’d love to see, get help on StackOverflow and check our support page for the right tags to use.

We’re looking forward to seeing what you build with this new tool and, as always, we’re eager for your feedback. Please comment on this post or on our Google+ Page.

Posted by Jen Kovnats, Product Manager on the Maps API Team

Posted:
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

Posted:

Since we introduced the ability to embed the new Google Maps, a growing number of sites across the web have been helping their visitors visualize and remember places, using maps built for them. However, we know that many sites require multiple maps, and repeatedly generating them can be a challenge.

Today we're making this easier by launching the Google Maps Embed API, giving developers the ability to generate HTML snippets that embed Google Maps within their own website. Using the API to take control of your embedded maps, you can now effortlessly customize the location and appearance of the map with a handful of simple URL parameters.

For example, our friends at the Guggenheim in New York are using the Google Maps Embed API, allowing visitors to save the location to Google Maps directly from the website. Visitors can then quickly plan their day and navigate to the museum by pulling up their saved places on any device with Google Maps.

Over in San Francisco, SFMOMA is using the Google Maps Embed API to show the museum’s temporary exhibit locations. Visitors can get easily get directions to these locations and save them to Google Maps for later viewing on any of their devices.

In addition, over the coming weeks, we’ll be updating existing classic Google Maps embeds to the new format so visitors can enjoy a consistent embedded Google Maps experience across the web. This also means that starting today, the Maps/Earth APIs Terms of Service will apply to all updated embedded Google Maps.

Finally, as with our existing embedded maps, the Google Maps Embed API is free and without limits, and the new API also includes the same on-map ad experience we introduced to embedded maps in November.

To get started, head over to our developers page and embed away!