title: InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: NaN is not an accepted value
body: <p>I am making a map through google maps with the aim of showing 2 points on the map, one point is already predefined and the other point will be made using database coordinates. </p>
  
  <p>The problem is that, even if the database coordinates are floated through the parseFloat function, google maps identifies the values ​​as NaN, since the alert works perfectly.</p>
  
  <p>Database:</p>
  
  <pre><code>CREATE DATABASE DB_USUARIOS;
  USE DATABASE DB_USUARIOS;
  CREATE TABLE TB_USERS(
      USU_CODIGO INT PRiMARY KEY AUTO_INCREMENTE,
      USU_LATITUDE FLOAT(10,7) NOT NULL,
      USU_LONGITUDE FLOAT(10,7) NOT NULL
  );
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;?php
           $consulta=$MySQLi-&gt;query("SELECT * FROM TB_USUARIOS");
           $resultado = $consulta-&gt;fetch_assoc();
          ?&gt;
          &lt;html&gt;
             &lt;head&gt;
             &lt;/head&gt;
             &lt;body&gt;
                &lt;div id="map"&gt; &lt;/div&gt;
                &lt;script&gt;
                   var latitude_cli = &lt;?php echo $resultado['USU_LATITUDE'];?&gt;; 
                   var longitude_cli = &lt;?php echo $resultado['USU_LONGITUDE'];?&gt;; 
                   alert(`${parseFloat(longitude_cli)} `);
                   alert(`${parseFloat(latitude_cli)} `);
          
                   function initMap() {
                      var ponto1 = newgoogle.maps.LatLng(parseFloat(latitude_cli),parseFloat(longitude_cli));
                      var ponto2 = new google.maps.LatLng(36.522793, -83.212665);
          
                      var map = new google.maps.Map(document.getElementById('map'),
                      {zoom: 4, center: ponto2});
          
                      var marker = new google.maps.Marker({position: ponto1, map: map, 
                      title:"Produto"});
          
                      var marker1 = new google.maps.Marker({position: ponto2, map: 
                      map,title:"Você"});
                      
                   }
                &lt;/script&gt;
                &lt;script async defer
                   src="https://maps.googleapis.com/maps/api/js?callback=initMap"&gt;
      &lt;/script&gt;
             &lt;/body&gt;
          &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>