Google Maps

The Google Maps Embed API lets you place an interactive map, or Street View panorama on your site with a simple HTTP request. It can be easily embedded in your web page or blog by setting the Google Maps Embed API URL as the src attribute of an iframe:

Example

To use the Google Maps Embed API, you must include a free API key when making a request to the API. Follow the instructions in the guide to getting an API key to register your app project on the Google API Console, and get a Google API key to add to your app or website.

<div id="map" style="height: 500px;"></div>

<script type="text/javascript">
function initMap() {
  var uluru = {lat: -12.043333, lng: -77.028333};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: uluru,
    scrollwheel: false,
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
</script>

Static Maps

The following example contains the URL of a Google Static Maps API image of downtown New York City, which is displayed:

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=640x440&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=AIzaSyCFHwOU3OoTBLDkppUsfRJLWYYq8kdCm28">

Place mode

Place mode displays a map pin at a particular place or address, such as a landmark, business, geographic feature, or town.

<iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBXCr6EY-ehCjZJ7p0OuXLaAHISi8LF5ss&q=Eiffel+Tower,Paris+France" width="600" height="450"></iframe>
version: 4.1.2