This document lists requirements for applications developed with the Maps JavaScript API. Note that use of the Maps JavaScript API is governed by your Agreement with Google.
PoliciesThis section describes policies relevant to Maps JavaScript API. Policies provide practical implementation guidelines and requirements to help you use the Service correctly and in line with Google Maps Platform's expectations.
Exceptions from caching restrictionsNote that the place ID, used to uniquely identify a place, is exempt from the caching restrictions. You can therefore store place ID values indefinitely. The place ID is returned in the place_id field in API responses. Learn how to save, refresh, and manage place IDs in the Place IDs guide.
Place Name may be returned to you based on user interactions with your app. If you were to capture or persist the Place Name for use in any other context outside of the user session, this would constitute scraping, which is not allowed by our terms.
European Economic Area countries and territoriesThis product has different Terms of Service for customers with a billing address in the European Economic Area (EEA), and it may also have different functionality. Before building with Google Maps Platform, review the following EEA-specific terms and information:
If your billing address is not in the EEA, the following terms of service apply to you:
Google Maps attribution requirementsThis section provides attribution requirements and guidelines for displaying Google Maps and Content through your applications.
Note: The following updated attribution requirements now use "Google Maps" instead of only "Google." We acknowledge that your existing implementations may use the attribution of "Google," in alignment with prior guidance, and you may continue using "Google" as an attribution for now. For new implementations, use "Google Maps" as described in this section. In the future, we will provide timelines and instructions to help you transition existing "Google" attributions to "Google Maps" attributions. Attribution exampleFollowing is an attribution example for Places UI Kit.
Required attribution applied to the Place Details compact component. On this non-Google map, the Google Maps attribution is clearly visible, and Google Maps Platform content is visually differentiated from other content. Display Google Maps attributionYou must follow Google Maps attribution requirements when displaying Content from Google Maps Platform APIs in your app or website. You don't need to add extra attribution if the Content is shown on a Google Map where the attribution is already visible.
Included Google Maps attributionFor Google Maps attribution that is already provided by Google Maps Platform in the user interface, such as in Places UI Kit:
Attribution should take the form of the Google Maps logo whenever possible. In cases where space is limited, the text Google Maps is acceptable. It must always be clear to end users which content is provided by Google Maps.
Left: Google Maps logo attribution, Right: Google Maps text attribution Logo attributionFollow these requirements for using the Google Maps logo in your app or website.
Acceptable variations for Google Maps logo attribution Download Google Maps logosUse the official Google Maps logo files. Download the logos below, and follow the guidelines in this section.
Download the Google Maps attribution assetsWhen using the Google Maps logo, follow these guidelines.
Follow these size specifications for the Google Maps logo:
To learn about dp, see Pixel density on the Material Design website.
Google Maps logo showing minimum clear space and acceptable size range Logo accessibilityFollow these accessibility requirements for the Google Maps logo:
If the size of your interface does not support using the Google Maps logo, you can spell out Google Maps in text. Follow these guidelines:
Acceptable variations of the Google Maps text attributiontranslate="no".Style Google Maps text as described in the following table:
Google Maps text-styling requirements Property Style Font family Roboto. Loading the font is optional. Fallback font family Any sans serif body font already used in your product or "Sans-Serif" to invoke the default system font Font style Normal Font weight 400 Font color White, black (#1F1F1F), or gray (#5E5E5E). Maintain accessible (4.5:1) contrast against the background. Font size Minimum font size: 12spThe following CSS renders Google Maps with the appropriate typographic style and color on a white or light background.
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
.GMP-attribution {
font-family: Roboto, Sans-Serif;
font-style: normal;
font-weight: 400;
font-size: 1rem;
letter-spacing: normal;
white-space: nowrap;
color: #5e5e5e;
} Visual requirements
Follow these requirements for the visual treatment of Google Maps attribution.
Position attribution near the top or bottom of the content, and within the same visual container. For a single line of content, attribution can be positioned to the right or left.
Visually distinguish Google Maps Platform Content from other content by using UI cues such as a border, background color, shadow, or sufficient whitespace.
The following figures show examples of these visual requirements.
Example of Google Maps attribution positioned at the top, at the bottom, and to the side of the contentSome of the data and images on our mapping products come from providers other than Google. For some products, such as Map Tiles API, we may provide you with the required attribution to the third-party data provider. When we do, the text of your attribution must say the name "Google Maps" and the relevant data provider(s), such as "Map data: Google, Maxar Technologies." When Google provides third-party attribution, only including "Google Maps" or the Google logo is not proper attribution.
Other attribution requirementsFollow these instructions to retrieve third-party attributions, and to display the attributions in your app.
Reviews and photos provided through the Maps JavaScript API are subject to Google's content and product policies wherever you are in the world. To report content that you or your users would like removed from Google's services under Google's policies or applicable laws, see Report Content On Google Retrieve attributions from a PlaceIf your app displays review information obtained by calling Place.fetchFields, the app must also display third-party attributions for the place details obtained.
The API returns a Place object. To retrieve attributions from the Place object, use the Place.attributions property, which is returned with every request (there is no need to specify it with fields). The property returns a List of String objects, or null if there are no attributions to display. The following example code shows getting a place, and listing any attributions.
// Use place ID to create a new Place instance.
const place = new Place({
id: 'ChIJB9a4Ifl744kRlpz0BQJzGQ8', // Crazy Good Kitchen
});
// Call fetchFields, passing the desired data fields.
await place.fetchFields({
fields: ["displayName", "formattedAddress", "location", "reviews"],
});
// Check for any place attributions.
if (!place.attributions) {
console.log('No attributions were found.');
return;
} else {
// Log the place attribution
for (var attribution of place.attributions) {
console.log(attribution);
}
}
Display a review
A Place object can contain up to five reviews, where each review is represented by a Review object. You can optionally display these reviews in your app.
When displaying reviews contributed by Google users, you must place the author's name in close proximity. When available in the author attribution field of the Review object, we recommend you include the author's photo and link to their profile as well. The following image shows an example of a review of a park:
The following example shows getting a place, checking for reviews, and showing the data from the first review:
// Use place ID to create a new Place instance.
const place = new Place({
id: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
});
// Call fetchFields, passing "reviews" and other needed fields.
await place.fetchFields({
fields: ["displayName", "formattedAddress", "location", "reviews"],
});
// If there are any reviews display the first one.
if (!place.reviews) {
console.log('No reviews were found.');
} else {
// Log the review count so we can see how many there are.
console.log("REVIEW COUNT: " + place.reviews.length);
// Get info for the first review.
let reviewRating = place.reviews[0].rating;
let reviewText = place.reviews[0].text;
let authorName = place.reviews[0].authorAttribution.displayName;
let authorUri = place.reviews[0].authorAttribution.uri;
// Create a bit of HTML to add to the info window
const contentString =
'<div id="title"><b>' + place.displayName + '</b></div>' +
'<div id="address">' + place.formattedAddress + '</div>' +
'<a href="' + authorUri + '" target="_blank">Author: ' + authorName + '</a>' +
'<div id="rating">Rating: ' + reviewRating + ' stars</div>' +
'<div id="rating""><p>Review: ' + reviewText + '</p></div>';
// Create an info window.
infoWindow = new InfoWindow({
content: contentString,
ariaLabel: place.displayName,
});
// Add a marker for the place.
const marker = new AdvancedMarkerElement({
map,
position: place.location,
title: place.displayName,
});
// Show the info window.
infoWindow.open({
anchor: marker,
map,
});
}
See the documentation for place reviews.
Display attributions for a photoIf your app displays photos, you must show author attributions for each photo that has them. Details about the photo in a Place object of a response are contained in the photos array. To add the photos array to the response, include the photos data field in the request.
Each element of the photos array is an instance of Photo, which contains the authorAttributions array, of type AuthorAttribution. The fields of the AuthorAttribution object are strings containing the displayName, uri, and photoUri of the attribution, or an empty string if there are no attributions to display.
See the documentation for place photos.
Search results attributionsIn Europe, when using Google's unadulterated ranking, search products must have explainer text no more than 1 click away that describes the main factors and the weighting of the main factors that determine search results ranking. Explainer text:
Header: About these resultsAutocomplete for end user addressesBody: When you search for businesses or places near a location, Google Maps will show you local results. Several factors — primarily relevance, distance and prominence — are combined to help find the best results for your search.
Button 1: Learn more
"Learn more" text should link to a Help Center article.Button 2: OK
When an end user uses Autocomplete functionality within your Customer Application to type ahead a street address and that street address would have been completely and accurately provided by that end user without Autocomplete, the end user's selected address is then not subject to the Google Maps Content restrictions in your Google Maps Platform Agreement. This exception applies only to the street address selected by the end user and solely for that end user's specific transaction; it does not apply to the list of suggested addresses provided by the Autocomplete functionality or to other Google Maps Content. This exception does not apply to any POI or address lookup functionality offered by other Google Maps Platform Services.
In the previous image, the address list on the left is still subject to the restrictions on Google Maps Content. Once the end user selects their chosen address, that address is not subject to the restrictions on Google Maps Content solely for the purpose of that end user's applicable transaction.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4