I cannot get the google map to show in theme please.

Does there need to be an API for this please?

I coud not see anything in the documentation.

THanks

In the demo I am using it just has this code and does not uise the WP bakery map functionality

<div id="map-canvas" style="width: 100%; height: 500px;"></div>
<script type='text/javascript' src='//maps.googleapis.com/maps/api/js?key=AIzaSyCruHDq70rCC4uPG_wkMxP6nS5SNoQEN4A'></script>
<script type="text/javascript"> function initialize() {

var mapOptions = {
zoom: 11,
center: {lat: 51.545190, lng: -0.480470},
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']},  
disableDefaultUI: true,
disableDoubleClickZoom: true,
scrollwheel: false, // change
draggable: true // change
};

var styles =[{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":"70"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"off"},{"color":"#000000"},{"lightness":"30"}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"on"},{"gamma":"0"},{"lightness":"-50"},{"saturation":"-90"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":"10"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21},{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":"40"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":"16"},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":"20"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#171717"},{"lightness":17}]}];

var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});

var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}

google.maps.event.addDomListener(window, 'load', initialize); </script>