Easier web maps with HTML and vector mode APIs

Over the past year we've made two key updates to the Maps JavaScript API to make adopting our latest and greatest maps even easier: HTML maps, and vector mode APIs.

HTML maps

Today we're announcing the general availability of our first set of HTML-based APIs, powered by standards-based Web Components. Now you can embed interactive maps into HTML-compatible environments with just a few lines of code–including inline to JSX in React web apps. Quickly get started by using the <gmp-map> element. 

Here's a basic example:

<script async src="https://maps.googleapis.com/maps/api/js?libraries=maps&key=YOUR_KEY&loading=async"></script>
<gmp-map
  center="37.4220656,-122.0840897"
  zoom="10"
  style="height: 400px">
</gmp-map>

Additional content on the map, like Advanced Markers, can also be added directly via HTML:

<script async src="https://maps.googleapis.com/maps/api/js?libraries=maps,marker&key=YOUR_KEY&loading=async"></script>
<gmp-map
  center="37.4220656,-122.0840897"
  zoom="10"
  map-id="DEMO_MAP_ID"
  style="height: 400px">
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA">
  </gmp-advanced-marker>
</gmp-map>

Find out more in our Add a Google Map with Markers using HTML guide and our Add a Map with Events using HTML code sample. You can also check out the full MapElement API in our reference docs. 

To maintain backwards compatibility for the existing google.maps.Map, <gmp-map> has been introduced as a new google.maps.MapElement class. While not all map functionality is available via HTML today, please file feature requests to help us prioritize future development. All map functionality of a <gmp-map> can still be accessed via JavaScript, via the MapElement.innerMap property.

Note: be sure to only include the Maps JavaScript API <script> tag once on your page, or use the dynamic library import.

Vector mode APIs

The new <gmp-map> element defaults to vector rendering, so that you get the latest map technology right "out of the box".

We've also made it even easier to upgrade existing map code to utilize vector rendering. Simply add `renderingType: "VECTOR"` to your map instantiation, as shown in this example:

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
  renderingType: "VECTOR"
});

We recommend thoroughly testing when making this change; there are a number of differences that come with vector rendering. Most notably, in-code JSON styling will no longer function, but you can use cloud-based maps styling instead.

Looking to the future

Our team is also hard at work bringing next-generation 3D maps to the Maps JavaScript API. These also support development in HTML. You can get started with just two lines of code:

<script async src="https://maps.googleapis.com/maps/api/js?libraries=maps3d&key=YOUR_KEY&v=beta&loading=async"></script>
<gmp-map-3d mode="hybrid" style="height: 400px"></gmp-map-3d>

Note: 3D Maps are currently available in the Preview launch phase.

You can find more information in our developer guides, and as always please be sure to file feature requests and issue reports to help us make our products even better.