본문

구글 맵 openapi 가져와서 db의 parkinglot테이블에 있는 위도 경도 값으로 맵에다가 마커 표시해주려고 하는데 어느부분이 문제인지 모르겠습니다 ㅠㅠ 맵은 나오는데 마커가 표시가 안되는걸 보면 db연동이 제대로 안된것 같기도 하구요 ㅠㅠ 코드 올리겠습니다

<?php
$conn=mysqli_connect("localhost", "root", "1234", "carsharing") or die("MySQL 접속 실패!! ");
$sql = "SELECT * FROM parkinglot";
$result = mysqli_query($conn, $sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <fieldset>
        <div id="idx_top">
        </div>
    </fieldset>
       <center> <div id="map" style="width: 1800px; height:650px; margin-top:40px"></div></center>
           
  <script>
   $(document).ready(function () {
      initMap();
    });
 
  function initMap() {
      const myLatLng = {
        lat: 36.8402,
        lng: 127.1850
      };
 
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      center: myLatLng,
    });
 
    
    $.ajax({
        type: 'GET',
        url: '/places',
        data: {},
        success: function (response) {
          if (response['result'] == 'success') {
            let parking = response['parkinglot']
            for (let i = 0; i < parking.length; i++) {
              var park = { lat: parking[i]['parkinglat'], lng: parking[i]['parkinglng'] }
              var marker = new google.maps.Marker({ position: park, map: map, title: parking[i]['parkinglotName'] });
            }
          }
        }
      });
    }    
    </script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADE6zw1xt9mEbQYvRuJS7_rGDX5Su0Et0&callback=initMap&libraries=&v=weekly"
      defer
    >
    </script>
    </body>
 
</html>