How to add a Google Map

In TeleportHQ, you add a map with the GMaps element. Drag GMaps from Elements → Primitives → Media onto your page (or click it), then type your address into the address field of the Google Maps Location section in the right panel. The map moves to that address. You don't need a Google account or API key.

Steps#

1. In the left sidebar, click Elements.
2. On the Primitives tab, scroll to the Media group.
3. Drag GMaps onto the canvas, for example into your contact section. Or select that section and click GMaps: the map goes inside it. The new map shows a sample location in New York.

4. With the map selected, in the right panel, find Google Maps Location.
5. In address, type your full address. For example, 12 Baker Street, London.
6. Press Enter. The pin moves to your address.

Use exact coordinates instead#

Use latitude and longitude when the address is hard for Google to find, for example a market stall.

1. Open Google Maps and right-click the exact spot.
2. Click the two numbers at the top of the menu to copy them. The first is the latitude, the second the longitude.
3. In TeleportHQ, in Google Maps Location, paste the first number into lat, for example 51.5237.
4. Paste the second number into lng, for example -0.1585.
5. Clear the address field. The address overrides latitude and longitude.

Use Google's embed link#

You can also paste an embed link from Google Maps.

1. In Google Maps, find the place and click Share.
2. Click Embed a map and copy the address inside src="...".
3. In TeleportHQ, paste it into src in Google Maps Location.
4. Clear address, lat and lng. Those fields override src.

Check that it worked#

The map on the canvas shows a pin at your location. Visitors can drag and zoom the map on your live site. To try it before publishing, preview your site.

Troubleshooting#

The map still shows the old location The Google Maps Location section notes that "The address field overrides the latitude and longitude fields for the location pin. Both address and lat/lng override the src field." Clear the fields you're not using.

The map shows the wrong place Add more detail to the address, such as the city and country, or use latitude and longitude.

The map is too small A new map is 320 × 200 pixels. In the right panel, open Size and set the width to 100% and a height such as 400px. See How to set an element's width and height.

Good to know#

• Round the map's corners or add a shadow like any element. See How to add borders, rounded corners and shadows.
• The map loads from Google on your live site.