V4 Elements Google Maps Estimated reading: 5 minutes 3 views Show a Google Map on your page. Type a place name and it appears. Choose the zoom, and pick a road map or a satellite view. No code and no API key needed. WIDGET Google Maps NEEDS Just a place name PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. The map works without a Google API key. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Google Maps widget is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Google Maps under General Widgets and switch it on. Click Save Settings. The Google Maps card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the map in. Click the + button at the top left to open the Elements panel. Look under AAE General for Google Maps. Drag it onto your page. The Google Maps in the Elements panel (click to zoom) Tip: Can not see it? Type Google Maps in the search box at the top of the panel. Note: A new map already shows the London Eye, so you can see it working right away. STEP 3 Choose Your Location Tell the map what to show. Select the map and open the Google Maps section. Click the Location box. Type a place name or an address, for example Eiffel Tower, Paris, France. Wait a moment. The map moves to the place and puts a red pin on it. Location (1), Zoom (2), Map Type (3), Language (4) and Region (5) (click to zoom) Tip: The more exact you are, the better. A full street address works best for small shops. STEP 4 Zoom and Map Type Choose how close you want to look, and what the map looks like. Type a number in Zoom, from 1 to 20. A small number shows a big area, like a city. A big number shows a small area, like a street. Choose the Map Type: Roadmap is the normal map. Satellite shows photos from above. Click Update to save your page. Satellite with a zoom of 16 (click to zoom) Tip: Good starting points: 10 for a city, 14 for a neighborhood and 16 for a building. STEP 5 Language and Region (Optional) Most people can skip these two boxes. Use them if you want the map labels in a certain language. In Language, type a short code like en or fr. In Region, type a country code like US or FR. Note: Leave them empty to let Google choose for each visitor. STEP 6 Make It Bigger or Smaller Select the map and open the Style tab. Open Size. Change the Height to make the map taller or shorter. Change the Width if you do not want it to fill the whole row. Click Update to save your page. Tip: A new map is 300px tall. RESULT Final Result Three maps on a live page, each with its own setting. Roadmap, zoom 10 The default. A road map of London with the London Eye pinned. Location: London Eye. Zoom 10. Roadmap. Satellite, zoom 16 Location is Eiffel Tower, Paris, France, Zoom is 16 and Map Type is Satellite. Satellite view of the Eiffel Tower at zoom 16 Roadmap, zoom 14 Location is Statue of Liberty, New York, USA and Zoom is 14. The Statue of Liberty at zoom 14 SETTINGS Options Location Default: London Eye, London, United KingdomThe place or address to show. Zoom Default: 10How close the map is, from 1 to 20. Map Type Default: RoadmapRoadmap or Satellite. Language Default: emptyLanguage of the map labels, like en. Region Default: emptyCountry code, like US. ID Optional CSS ID for the map. GOOD TO KNOW More Details No API key needed The map works without a Google API key. If your site already has a Google Maps key in the Animation Addons settings, the map uses it. Empty location If you clear the Location box, the map shows a short message asking for a location. Loads when needed The map loads as your visitor scrolls near it, so it does not slow down your page. You need internet The map comes from Google, so you need an internet connection to see it, including in the editor. HELP Troubleshooting I do not see the Google Maps in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Google Maps. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. The map shows a message about a location The Location box is empty. Type a place name or an address. The map shows the wrong place Be more exact. Add the city and the country, for example Cafe Roma, Rome, Italy. The map is too small Select the map, open the Style tab, then Size, and make the Height bigger. The map does not load Check your internet connection and reload the page. The map comes from Google. You Did It Your page now shows where to find you. If you face any problem, please contact our support team. We are happy to help.
