[Maps] Always show current zoom level (#62684)

Co-authored-by: Elastic Machine <[email protected]>

Author: nreese

x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/view_control/view_control.js

@@ -5,28 +5,33 @@
  */
 
 import _ from 'lodash';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { EuiText } from '@elastic/eui';
 import { DECIMAL_DEGREES_PRECISION } from '../../../../common/constants';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export function ViewControl({ mouseCoordinates, zoom }) {
-  if (!mouseCoordinates) {
-    return null;
+  let latLon;
+  if (mouseCoordinates) {
+    latLon = (
+      <Fragment>
+        <strong>
+          <FormattedMessage id="xpack.maps.viewControl.latLabel" defaultMessage="lat:" />
+        </strong>{' '}
+        {_.round(mouseCoordinates.lat, DECIMAL_DEGREES_PRECISION)},{' '}
+        <strong>
+          <FormattedMessage id="xpack.maps.viewControl.lonLabel" defaultMessage="lon:" />
+        </strong>{' '}
+        {_.round(mouseCoordinates.lon, DECIMAL_DEGREES_PRECISION)},{' '}
+      </Fragment>
+    );
   }
 
   return (
     <div className="mapViewControl__coordinates">
       <EuiText size="xs">
         <small>
-          <strong>
-            <FormattedMessage id="xpack.maps.viewControl.latLabel" defaultMessage="lat:" />
-          </strong>{' '}
-          {_.round(mouseCoordinates.lat, DECIMAL_DEGREES_PRECISION)},{' '}
-          <strong>
-            <FormattedMessage id="xpack.maps.viewControl.lonLabel" defaultMessage="lon:" />
-          </strong>{' '}
-          {_.round(mouseCoordinates.lon, DECIMAL_DEGREES_PRECISION)},{' '}
+          {latLon}
           <strong>
             <FormattedMessage id="xpack.maps.viewControl.zoomLabel" defaultMessage="zoom:" />
           </strong>{' '}