Плагин gmap3 не может отображать маркер

из плагина gmap3 я хочу показать много мест из базы данных mysql с php и jquery. У меня есть ссылка на gmap3_tatorte. Но мой код не может работать должным образом.

позволяет подготовить: 1.database pbss , маркеры таблиц

CREATE TABLE markers ( id int (11) NOT NULL, name varchar (60) NOT NULL, address varchar (80) NOT NULL, lat float (10,6) NOT NULL, lng float (10,6) NOT NULL, type varchar (30) NOT NULL, statc varchar (10) NOT NULL) ENGINE = MyISAM DEFAULT CHARSET = latin1;

INSERT INTO ( id , name , address , lat , lng , type , statc ) ЦЕННОСТИ (1, 'BYK0002', 'Bank Mandiri Banyumanik 1, smg', -7.001723, 110.370468, 'bank', 'alive'), ( 2, «SWASMG0011», «Indomaret 1, Pedurungan, Smg», -7.031723, 110.431892, «swalayan», «alert»), (3, 'PUBSMG0051', 'Simpang lima, Semarang', -6.990322, 110.422775, 'publiczone ',' живой '), (4,' HOTSMG0020 ',' Hotel pandanaran, Semarang ', -6.992197, 110.418358,' hotel ',' alive '), (5,' RESSMG0031 ',' Resto dapuralena 2, Semarang ',' -6.981783, 110.427826, «ресторан», «предупреждение»), (6, «RUMSMG0001», «Perum polda smg, Semarang», -7.021364, 110.409988, «rumah», «alert»), (7, «SEKSMG0001», «Univ Diponegoro, Semarang», -6.989673, 110.413078, «sekolah», «живой»), (8, «HOTSMG0021», «Hotel Ibis, Semarang», -6.960706, 110.398315, «отель», «живой»), ( «26», «SEKSMG0002», «Polines Tembalang Semarang», -6,965278, 110,443497, «sekolah», «alert» «);

файл PHP для запроса данных из базы данных: req_taufik.php

  <?php try { $db = new mysqli('localhost', 'root', '', 'pbss'); $tatorte = $db->query(" SELECT * FROM markers "); $rows = array(); while ($locations = $tatorte->fetch_assoc()) { // $rows[] = array('values' => $locations); $lat = $locations['lat']; $lng = $locations['lng']; $values = json_encode( array('nama' => $locations['name'], 'alamat' => $locations['address'], 'status' => $locations['statc']) ); $rows[] = array('lat' => $lat, 'lng' => $lng, 'values' => $values); } $json = array( "center" => array(51.95026490,11.69227350), // center map at a given location "tatorte" => $rows ); header('Content-Type: application/json; charset=UTF-8;'); echo json_encode( $json ); } catch (Exception $e) { echo $e->getMessage(); } ?>

3.file styles.css и index.php

 body { text-align: center; } .gmap3{ margin: 20px auto; border: 1px dashed #C0C0C0; width: 1000px; height: 500px; } .cluster{ color: #FFFFFF; text-align:center; font-family: 'Arial, Helvetica'; font-size:11px; font-weight:bold; cursor: pointer; } .cluster-1{ background-image:url(images/m1.png); line-height:53px; width: 53px; height: 52px; } .cluster-2{ background-image:url(images/m2.png); line-height:53px; width: 56px; height: 55px; } .cluster-3{ background-image:url(images/m3.png); line-height:66px; width: 66px; height: 65px; }

  <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=xxxxxxxxxxxx&amp;language=en"></script> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <link type="text/css" rel="stylesheet" href="styles.css" /> <script type="text/javascript" src="gmap3.js"></script> <body> <div id="test" class="gmap3"></div> <script> function loadData(){ var markers = []; $.ajax({ url:'req_taufik.php', success:function(data){ var markers = []; $.each(data, function(key, val){ var position = [val.lat, val.lng]; markers.push({ latLng: position }); }); display(data.center, data.tatorte); } }); } $(function(){ loadData(); }); function display(center, tatorte) { $('#test').gmap3({ map:{ options:{ center: center, zoom:7, mapTypeId: google.maps.MapTypeId.TERRAIN } }, marker: { values: tatorte } }); } </script> </body> </html>

РЕЗУЛЬТАТ: на этом рисунке маркеры не показывают

надеюсь, что любой орган поможет.