FIXED (Wordpress admin) google maps only show's with DEBUG = TRUE - wordpress

Question

EDITED
Was all just about styles because is wrapped into the admin dashboard.
width: 100% didn't work for <div id="mymap">, had to set a fixed width to make it works.
Google map is showing only with wordpress debug mode activated, when switching DEBUG variable to false and refreshing admin page, can't see map anymore, setting it back to true and refreshing page again it appears.
0 errors in chrome's console, clear.
Looks like the map is there already but not visible? If I click over the map is supposed to be, then can see this error in console:
Uncaught ReferenceError: o is not defined
at HTMLDocument.document.addEventListener.t (<anonymous>:1:784)
const t=Object(o.a)(n);if(t)return e.__VUE_DEVTOOLS_CONTEXT_MENU_HAS_TARGET__=!0,void(e.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET__=t)}e.__VUE_DEVTOOLS_CONTEXT_MENU_HAS_TARGET__=null,e.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET__=null})})(window)
Can't understand what's the meaning of this.
wordpress version: 4.9.2
theme: Betheme (Same with storefront or twentyseventeen so discarded theme issue)
scripts loaded by: admin_enqueue_scripts by custom script...
wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxx');
wp_enqueue_script('google-jsapi','https://www.google.com/jsapi');
Full file:
<?
function mostrar_retiradas() {
global $wpdb;
?>
<div class="wrap">
<h2>Retiradas pendientes</h2>
</div>
<?php
// Filtramos la consulta por estado del pedido buscamos wc-retirando
$retirandoids = $wpdb->get_results( "SELECT * FROM `wp_posts` WHERE post_type = 'shop_order' AND post_status = 'wc-retirando' ");
// creamos una copia del pedido llamando a la clase principal
for ($i=0 ; $i<count($retirandoids) ; $i++ ) {
$order_data[$i] = new WC_Order($retirandoids[$i]->ID);
}
// Añadimos todos los campos de direccion del pedido para la consulta de geolocalizacion
for ($i=0 ; $i<count($order_data) ; $i++ ) {
$address[$i] = $order_data[$i]->get_shipping_address_1() . ' ' . $order_data[$i]->get_shipping_address_2() . ' ' . $order_data[$i]->get_shipping_city();
}
for ($i=0 ; $i<count($address) ; $i++ ) {
$direccion[$i] = geocode_address($address[$i]);
}
// if able to geocode the address
for ($i=0 ; $i<count($direccion) ; $i++ ) {
if(($direccion[$i][0]) && ($direccion[$i][1]) && ($direccion[$i][2]) ) {
$latitude[$i] = $direccion[$i][0];
$longitude[$i] = $direccion[$i][1];
$formatted_address[$i] = $direccion[$i][2];
}
}
?>
<!-- google map will be shown here -->
<div id="gmap_canvas">Loading map...</div>
<div id='map-label'>Map shows approximate location.</div>
<!-- JavaScript to show google map -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCEkSTZBVD5tDBrlot1nbRDjIQ103B4xeE"></script>
<!-- <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> -->
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#gmap_canvas {
height: 100%;
}
</style>
<script type="text/javascript">
var latitudes = <?php echo json_encode($latitude) ?>;
var longitudes = <?php echo json_encode($longitude) ?>;
var direcciones = <?php echo json_encode($formatted_address) ?>;
var markers = [];
for (var i=0; i<latitudes.length ; i++ ) {
var newMarker = {
position: new google.maps.LatLng(latitudes[i], longitudes[i]),
type: 'caution'
}
markers.push(newMarker);
}
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
},
caution: {
icon: iconBase + 'caution.png'
},
ranger_station: {
icon: iconBase + 'ranger_station.png'
},
truck: {
icon: iconBase + 'truck.png'
}
};
function init_map() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(<?php echo $latitude[0]; ?>, <?php echo $longitude[0]; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
var marker;
markers.map((item, index) => {
marker = new google.maps.Marker({
position: item.position,
icon: icons[item.type].icon,
map: map
})
infowindow = new google.maps.InfoWindow({
content: direcciones[index]
});
google.maps.event.addListener(marker, "click", function () {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
})
}
// google.maps.event.addDomListener(window, 'load', init_map);
init_map();
</script>
<?php
}
Any Help to will be much apreciated
Thx in advance.

Answer 1

Could be that the map script is being called after the init_map() function? Also I see that you are calling again the maps script within the function mostrar_retiradas(){, which should only be called once. But in the past I have had issues when using wp_enqueue_script(, they should be called first, and then you should call mostrar_retiradas, I wouldn't recommend having a JavaScript file within a PHP function, the code should be separated from each other.