現在地を取得してからMySQL内のデータを表示させたい

Geolocation APIを使って現在地を取得して、PHPMyadmin内にあるデータベースのデータをマップ上に表示させたい。
（例）今いる現在地からデータベース内にある店舗情報を表示させるシステムを作っています。
データベース内の店舗データを取り出す機能を制作したいと考えています。

発生している問題・エラーメッセージ

発生している問題として、https://rikulog.com/programing/google-map-api/#i-2　を参考にしながら制作しています。

エラーメッセージ


### どう書けばいいのかがわかりません。。

```PHP,Javascript,html,css

ソースコード
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map3</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .sample {
        width: 100px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div id="map" style="height: 500px; width: 50%; margin: 2rem auto 0;"></div>
    <button id="getcurrentlocation">getcurrentlocation</button>


    <!-- jquery読み込む -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- google map api -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YourApiKey&libraries=places"
    ></script>
    <!-- js -->
    <script src="index3.js" async></script>

  </body>
</html>



#JavaScript


$(function(){

　　　　　　　'use strict';
　　　　　　　　var map;
    var service;
    var infowindow;
    var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
    createMap(pyrmont)


     // 現在地取得
     document.getElementById('getcurrentlocation').onclick = function() {
      geoLocationInit();
    }

    function geoLocationInit() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(success, fail);

        } else {
          createMap(pyrmont);
      }
    }

   // success
   function success(position) {
     var currentLat = position.coords.latitude;
     var currentLng = position.coords.longitude;

     var pyrmont = new google.maps.LatLng(currentLat,currentLng);

     createMap(pyrmont)

     CurrentPositionMarker(pyrmont);
   }

    // fail
    function fail(pyrmont) {
      createMap(pyrmont);
    }

    function createMap(pyrmont) {

      map = new google.maps.Map(document.getElementById('map'), {
        center: pyrmont,
        zoom: 15
      });
      nearbysearch(pyrmont)
    }

    function createMarker(latlng, icn, place)
    {
      var marker = new google.maps.Marker({
        position: latlng,
        map: map
      });

      var placename = place.name;
　　　　　　　　　　// 吹き出しにカフェの名前を埋め込む		  
      var contentString = `<div class="sample"><p id="place_name">${placename}</p></div>`;

     // 吹き出し
      var infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加
		  content:  contentString// 吹き出しに表示する内容
		});


		marker.addListener('click', function() { // マーカーをクリックしたとき
			infoWindow.open(map, marker); // 吹き出しの表示
		});

      }

    // 現在地のアイコンを表示
    function CurrentPositionMarker(pyrmont) {
        var image = 'http://i.stack.imgur.com/orZ4x.png';
        var marker = new google.maps.Marker({
                position: pyrmont,
                map: map,
                icon: image
            });
        marker.setMap(map);
    }

    // 周辺のカフェを検索
    function nearbysearch(pyrmont) {
        var request = {
          location: pyrmont,
          radius: '1500',
          type: ['cafe']
        };

        service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);

        function callback(results, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
	　　　　　　　　//取得したカフェ情報をそれぞれcreateMarkerに入れて、マーカーを作成  
            for (var i = 0; i < results.length; i++) {
              var place = results[i];
              //console.log(place)
              var latlng = place.geometry.location;
              var icn = place.icon;

              createMarker(latlng, icn, place);
            }
          }
        }
    }
});


### 試したこと

別々に実装はできた。
・マップを表示
・配列にデータベース内のデータ格納して表示

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。