google mapが表示されない

Question

私は現在の位置からデータベースから取得した座標までのパスを持つマップを表示しようとしています。

座標を正しく取得できますが、マップ上では使用できません。

キー：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDB-9d7kH95-ps-QXbhUeERjSrqz5SDxpc&callback=initMap"></script> 

<script> 
    //gets coordinates from database into the var called lat 
    var lat = '<?php 
    $mysqlserver = "localhost"; 
    $mysqlusername = "root"; 
    $mysqlpassword = ''; 
    $dbname = "hair_studios"; 
    $con = mysqli_connect($mysqlserver, $mysqlusername, $mysqlpassword) or die("Failed to connect to MySQL: " . mysqli_error()); 
    $db = mysqli_select_db($con, $dbname) or die("Failed to connect to MySQL: " . mysqli_error()); 

    $cord = mysqli_query(
     $con, 
     "SELECT `Latitude`,`Longitude` 
      FROM `all_studios` 
      WHERE Studio_Name = 'Skydiva Beauty Works'" 
    ); 

    while ($results = mysqli_fetch_array($cord)) { 
     $lat = $results['Latitude']; 
     $long = $results['Longitude']; 

     echo ' \"'. $lat . ',' . $long .'\" '; 
    } 
    ?>'; 

    //displaying the coordinates: 

    alert(lat); 

    //the mapping funcion 

    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(success, error); 
    } else { 
     error('not supported'); 
    } 

    var directionDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function success(position) { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var latlng = new google.maps.LatLng(lat); 
     var mapOptions = { 
      zoom:15, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: latlng 
      } 

     map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions); 
     directionsDisplay.setMap(map); 
     directionsDisplay.setPanel(document.getElementById("directionPanel")); 

     var start = lat; 
     var end = position.coords.latitude + ',' + position.coords.longitude; 
     var mode; 

     switch ('driving') 
      { 
      case 'bicycling' : 
       mode = google.maps.DirectionsTravelMode.BICYCLING; 
       break; 
      case 'driving': 
       mode = google.maps.DirectionsTravelMode.DRIVING; 
       break; 
      case 'walking': 
       mode = google.maps.DirectionsTravelMode.WALKING; 
       break; 
      } 

     var request = { 
      origin:start, 
      destination:end, 
      travelMode: mode 
     }; 

     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
          directionsDisplay.setDirections(response); 
      } 
     }); 

    } 

    function error(msg) { 
     var s = document.querySelector('#status'); 
     s.innerHTML = typeof msg == 'string' ? msg : "failed"; 
     s.className = 'fail'; 

     console.log(arguments); 
    } 

</script> 

Answer 1

A google.maps.LatLngコンストラクタは引数としてではなく、カンマ区切りの文字列 2つの数字をとります。

javascriptコンソールでそのようなエラーが発生するはずです。