Google Map Integration with TYPO3

What is Google Maps?

Google Maps provides a highly responsive, intuitive mapping interface with embedded, detailed street and aerial imagery data. In addition, map controls can be embedded in the product to give users full control over map navigation and the display of street and imagery data. Users can also perform map panning through the use of the “arrow” keys on a keyboard, as well as by dragging the map via the mouse.

Google Maps Fundamentals

Before you can get started developing Google Maps applications you will need to sign up for an API key. When you sign up for an API key, you must specify a Web site URL that will be used in your development.

Google also provides documentation for its product, including full documentation of the classes, methods and events available for the Google Maps objects as well as code examples to get you started. In addition, Google provides a blog and discussion group for additional information on using the API.

How to create api key:

  1. Visit the APIs Console at and log in with your Google Account.

  2. Click the Services link from the left-hand menu.

  3. Activate the Google Maps JavaScript API v3 service.

  4. Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.

Usage Limits:

Most websites and applications may use the Google Maps API free of charge. However, if web application generate a high amount of traffic, usage limits apply and you will need to pay for extra usage. If your site or application generates 25 000 map loads or more each day, for more than 90 consecutive days than you can do the following:

  • Modify your application so that your usage is less than 25 000 map loads per day.

  • Enroll for automated billing of excess map loads in the Google APIs Console.

  • Purchase a Google Maps API for Work license.

Language Localization:

The Google Maps API uses the browser's preferred language setting when displaying textual information such as the names for controls, copyright notices, driving directions and labels on maps. In most cases, this is preferable; you usually do not wish to override the user's preferred language setting. However, if you wish to change the Maps API to ignore the browser's language setting and force it to display information in a particular language, you can add an optional language parameter to the <script> tag when including the Maps API JavaScript code, specifying the language to use.

Map Controls:

The maps displayed through the Google Maps API contain UI elements to allow user interaction with the map. These elements are known as controls and you can include variations of these controls in your Google Maps API application. Alternatively, you can do nothing and let the Google Maps API handle all control behavior.

The Maps API built-in controls you can use in your maps are listed below:

  1. The Zoom control displays a slider (for large maps) or small "+/-" buttons (for small maps) to control the zoom level of the map. This control appears by default in the top left corner of the map on non-touch devices or in the bottom left corner on touch devices.
  2. The Pan control displays buttons for panning the map. This control appears by default in the top left corner of the map on non-touch devices. The Pan control also allows you to rotate 45° imagery, if available.
  3. The Scale control displays a map scale element. This control is not enabled by default.
  4. The MapType control lets the user toggle between map types (such as ROADMAP and SATELLITE). This control appears by default in the top right corner of the map.
  5. The Street View control contains a Pegman icon which can be dragged onto the map to enable Street View. This control appears by default in the top left corner of the map.
  6. The Rotate control contains a small circular icon which allows you to rotate maps containing oblique imagery. This control appears by default in the top left corner of the map. (See 45° Imagery for more information.)
  7. The Overview Map control displays a thumbnail overview map reflecting the current map viewport within a wider area. This control appears by default in the bottom right corner of the map, and is by default shown in its collapsed state.


A marker identifies a location on a map. By default, a marker uses a standard image. Markers can display custom images, in which case they are usually referred to as "icons." Markers and icons are objects of type Marker. You can set a custom icon within the marker's constructor, or by calling setIcon() on the marker.

Markers are designed to be interactive. For example, by default they receive 'click' events, so you can add an event listener to bring up an info window displaying custom information.

Info windows:

Info Windows can be used to display information about a particular point of interest and are typically opened just above a marker, but could potentially be placed anywhere on a map. Info Windows are opened via the openInfoWindow() method on an instance of GMap. Normally, Info Windows are used to hold HTML information such as text, links and images.

Categories: Neos CMS, TYPO3 CMS

Copyright © 2019 Lelesys Informatik GmbH, Deutschland. All Rights Reserved.