Blog

Follow Our Daily Life and Receive Valuable Insights

New Google Maps in Visual Composer for WordPress

Starting from today we introduce Google Maps for Visual Composer – element which includes simple way for adding Google Maps to your WordPress site. Taking into account constant improvements in Google Maps and way how to embed them we will constantly update this blog post with the latest information so you do not have to figure it out by yourself.

1. Find location on Google Maps

Before you add particular map to your website you will need to visit Google Maps site. On the left upper side you will see search field which can be used for finding specific location. Type the location you are looking for and make more important make sure that your map zoom level is exactly the same you wish to be represented on your WordPress site.

2. Receive embed code

Once you have your location and zoom level set you will need to retrieve embed code for inserting it on your site. On the right bottom side of the map you will see the “cog” icon which will trigger menu to appear. Choose “Share or embed map” option – this will open popup window where you must go to “Embed map” tab. Copy whole embed code as you will need it in Google Maps element.

3. Insert Google Maps

Now you can go to your WordPress site and add Google Maps element for Visual Composer. In the Google Maps element parameters window your will see “Map embed iframe” field where you must copy the embed code you got from Google Maps.

That’s it – now you will have Google Maps on your WordPress site with just 3 simple steps.

After that you can set additional parameters for your newly added Google Map and Save it. Now you have your created Google Map on your WordPress site backed up by Visual Composer.

43 Comments

  1. Nathanial Calica ·

    I blog often and I really appreciate your content. This great article has truly peaked my interest. I’m going to book mark your website and keep checking for new details about once a week. I subscribed to your RSS feed too.

    1. Raitis ·

      Hi Nathanial, thanks for your feedback and glad that you liked this tutorial.

      Thanks,
      Raitis Sevelis
      WPBakery

    1. Raitis ·

      Hi Richard, right now there is no such option, but are looking forward implementing additional controls. Thank you for your feature request – always happy to hear suggestions from our customers.

      Thanks,
      Raitis Sevelis
      WPBakery

          1. Trae ·

            I like devs who check the forums often as it shows you do. Also, loving visual composer! Can’t wait for you guys to update this feature. It will really help bring some of my sites full screen maps together. Thanks!

        1. Raitis ·

          Hi Sam, I will push our team to move this feature towards top of our Backlog.

  2. Adnan ·

    Hey, just wondering about the last qusetion here–disabling the scrollwheel zoom on the map?
    I hope that you are going to make this possible to us

  3. Andrei ·

    Hi,

    I bought a theme Autorepairshop that uses your Visual Composer. On a contact page http://www.rz.ee/cardrive/kontakt it uses a map as a background.
    I would like to change the zoom level of the map, so you could see the street name.
    Unfortunately just zooming the google maps before taking embed code does not work, the zoom stays the same.
    Any ideas?

    1. Raitis ·

      Hi, it seems that it is some customization made by theme author so I would suggest contacting theme author directly to get more information.

  4. Claretha Steverson ·

    I truly love your site.. Great colors & theme. Did you build this website yourself? Please reply back as I’m trying to create my own personal website and want to learn where you got this from or just what the theme is called. Thanks!

    1. Raitis ·

      Hi, thanks for kind words. As for the theme – it is custom theme, but we are looking into making it available public in some time. Just can’t name the exact date right now as there are tons of things to do there. Right now it is really tailored for our needs and won’t suit for wide audience.

  5. William ·

    #E-8_JTNDaWZyYW1lJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZ3d3cuZ29vZ2xlLmNvbSUyRm1hcHMlMkZlbWJlZCUzRnBiJTNEJTIxMW0xOCUyMTFtMTIlMjExbTMlMjExZDM4NjAuOTcxMzE0NDI4ODMxNiUyMTJkMTIwLjk4OTUwMjMxNDg0MDElMjEzZDE0LjYwMDcwOTk4OTgwMjM4NiUyMTJtMyUyMTFmMCUyMTJmMCUyMTNmMCUyMTNtMiUyMTFpMTAyNCUyMTJpNzY4JTIxNGYxMy4xJTIxM20zJTIxMW0yJTIxMXMweDAlMjUzQTB4MCUyMTJ6TVRUQ3NETTJKekF5TGpZaVRpQXhNakRDc0RVNUp6TXdMakVpUlElMjE1ZTAlMjEzbTIlMjExc2ZpbCUyMTJzdXMlMjE0djE0NTc0NTIyNzA4MDglMjIlMjB3aWR0aCUzRCUyMjYwMCUyMiUyMGhlaWdodCUzRCUyMjQ1MCUyMiUyMGZyYW1lYm9yZGVyJTNEJTIyMCUyMiUyMHN0eWxlJTNEJTIyYm9yZGVyJTNBMCUyMiUyMGFsbG93ZnVsbHNjcmVlbiUzRSUzQyUyRmlmcmFtZSUzRQ==

    This is the original code for google map. I removed the two == signs on the end of it. And it disables the scrolling.

    1. William ·

      I mean just remove the two equal signs on the end of the google map embed code.. Try it. 🙂

      1. John ·

        hi! 🙂 i cant seem to see the two equal signs at the end of the embedded code 🙁

    1. Raitis ·

      Hello, this is basic map element with option to place one element, but there are also 3rd party addons available which offer more advanced options. Please look into Addons section to see all the addons.

  6. Halsey ·

    How can I add JavaScript Style Array to the Google Map feature? I would like to change the look of the map to a grayscale . Thanks! 🙂

  7. Rumina ·

    Hi, my maps doesn’t show up 🙁 I get NoAPIKeys and SensorNotRequired errors?

  8. Horia ·

    Hi, on my google maps, there is no red dot for the location, and no info-bubble anymore!
    http://www.luxuryexoticproperties.com/egypt-condo/
    they worked fine until about 2 months ago, and now they dissapeared (without changing anything in the settings of the WP website). How can this happen? Do you know similar problems? I could not find any via google search…
    thanks in advance!
    HM

  9. Aakash Gupta ·

    how to deal with google map inside of a hidden tab.

    1. Raitis ·

      There is no such option in default VC, but you can look into addons for VC that allow adding Google Maps – there are cool options including multiple markers.

  10. Jon ·

    Any update on when this will be updated so Maps has an API key?

    1. Raitis ·

      Hi Jon, default Google Map element covers very basic options – you should look into Google Maps addon for a more advanced things.

      1. Klemens Forster ·

        Basic options which can’t be used without an API key… please tell us how to use an API key.

    1. Raitis ·

      Hi, just checked on our side and it works perfectly. Please visit our support at support.wpbakery.com so we can help you out.

  11. Santukon ·

    <script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&signed_in=true”></script>

  12. Oli ·

    Hi – I do not get that option to input the embed code. Why is this? I’m wanting to generate a map for my site but don’t seem to be able to.

Leave a Reply

Want to leave a comment? Hooray! We would love to hear your feedback or start a discussion. There are few mandatory fields, marked with asterics, you should fill to participate in discussion and do not worry, we will never share or display your e-mail address.