Hello! It is necessary that when new coordinates are added to the database, the marker is placed on the map without refreshing the page. I have not worked with Ajax before (if it is for this), so I find it difficult to implement, I will be grateful for the help. The page to generate a marker in the database (from Google documentation):

<?php require("config.php"); function parseToXML($htmlStr) { $xmlStr=str_replace('<','&lt;',$htmlStr); $xmlStr=str_replace('>','&gt;',$xmlStr); $xmlStr=str_replace('"','&quot;',$xmlStr); $xmlStr=str_replace("'",'&apos;',$xmlStr); $xmlStr=str_replace("&",'&amp;',$xmlStr); return $xmlStr; } $result = $pdo->query("SELECT * FROM markers WHERE 1"); header("Content-type: text/xml"); // Start XML file, echo parent node echo '<markers>'; // Iterate through the rows, printing XML nodes for each while ($row = $result->fetch()){ // ADD TO XML DOCUMENT NODE echo '<marker '; echo 'id="' . $row['id'] . '" '; echo 'address="' . parseToXML($row['address']) . '" '; echo 'description="' . parseToXML($row['description']) . '" '; echo 'lat="' . $row['lat'] . '" '; echo 'lng="' . $row['lng'] . '" '; echo 'username="' . parseToXML($row['username']) . '" '; echo '/>'; } // End XML file echo '</markers>';

Map page of the map itself and markers:

 <?php require_once "config.php" ?> <!DOCTYPE HTML> <html> <head> <title>Los Santos Police Department - 911 Online Map</title> <!-- Disallow users to scale this page --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="https://www.lacity.org/sites/g/files/wph571/themes/site/favicon.ico" type="image/vnd.microsoft.icon" /> <style type="text/css"> /* Allow the canvas to use the full height and have no margins */ html, body, #map-canvas { height: 100%; margin: 0 } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </head> <body> <!-- The container the map is rendered in --> <div id="map-canvas"></div> <!-- Load all javascript --> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="js/SanMap.min.js"></script> <script> var customIcons = { restaurant: { icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' }, bar: { icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' } }; var infoWindow = new google.maps.InfoWindow; downloadUrl("genxml.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var address = markers[i].getAttribute("address"); var description = markers[i].getAttribute("description"); var username = markers[i].getAttribute("username"); var point = new SanMap.getLatLngFromPos( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "<strong>911 ВЫЗОВ: </strong>" + username + "<br/>" + "<strong>ЛОКАЦИЯ: </strong>" + address + "<br/>" + "<strong>ОПИСАНИЕ: </strong>" + description; var icon = customIcons[username] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); bindInfoWindow(marker, map, infoWindow, html); } }); function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {} var mapType = new SanMapType(2, 5, function (zoom, x, y) { return x == -1 && y == -1 ? "tiles/map.outer.png" : "tiles/sanandreas." + zoom + "." + x + "." + y + ".png";//Where the tiles are located }); var satType = new SanMapType(2, 3, function (zoom, x, y) { return x == -1 && y == -1 ? null : "tiles/map." + zoom + "." + x + "." + y + ".png";//Where the tiles are located }); var map = SanMap.createMap(document.getElementById('map-canvas'), {'Карта': mapType, 'Спутник': satType }, 2, null, false, 'Спутник'); </script> </body>

SanMap is a map for a game that allows you to work with a game map, not our Earth.

  • You can make a request using ajax - whether the data in the database has changed - every 5 seconds, for example. If changed - redraw markers. You can go in the direction of the web-socket "ov. - Moonvvell
  • one
    Have you tried to remove the marker and reinstall? developers.google.com/maps/documentation/javascript/… - - Vanya Avchyan
  • What is not satisfied with the answer? - UserName
  • Not suitable, I wrote what code I have and what I am doing. Add json and change variables is not worth it. - francoder
  • They showed you just an algorithm of actions. It seems that no one will write the finished program for you. - UserName

1 answer 1

In this case, you can use EventSource to poll the server.

EventSource used to receive server events without closing the connection. Processed on the client side. An open connection is one-way, that is, the client can only listen to incoming messages from the server.

Next will be the listings of the code solving the problem, or rather, showing the solution algorithm. I will not include HTML markup, everything is standard there.

 // Создаем функцию обертку, чтобы позже ее вызвать function eventSource() { var event = new EventSource("URI скрипта сервера, который будет вещать"); // Начинаем слушать события сервера event.onmessage = function (message) { // Пользовательские данные находятся в поле data. var latLng = JSON.parse(message.data); latLng.lat = parseFloat(latLng.lat); latLng.lng = parseFloat(latLng.lng); // Передаем долготу/широту методу, который создает метки initMarker(latLng); }; }

Listing 2. We work with the map.

 // Делаем map глобальным, чтобы обращатся к нему из других методов var map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 2, center: {lat: 37.0902, lng: -95.7129}, disableDefaultUI: false }); // После того, как инициализирована карта, вызываем нашу обертку, которая будет принимать данные с сервера eventSource(); } function initMarker(latLng) { var marker = new google.maps.Marker({ position: latLng, map: map }); }

Listing 3. Server side.

 <?php // Разрешаем кросс-доменные запросы, иначе попытка соединения клиента провалится header("Access-Control-Allow-Origin: *"); // MIME ответа должен быть text/event-stream, иначе попытка соединения клиента провалится header("Content-Type: text/event-stream"); $dbConnect = mysqli_connect("dbServer", "dbUser", "dbPassword", "database"); $id = array(); while (1) { // Предположим, что имеем таблицу с id координат, долготой, широтой $query = "SELECT `id`, `lat`, `lng` FROM `coordinate`"; $result = mysqli_query($dbConnect, $query); // Перебор полученных данных while ($row = mysqli_fetch_assoc($result)) { // Если идентификатора нету в массиве, значит он еще не был выведен if (!in_array($row["id"], $id)) { // Добавляем в массив, чтобы исключить повторный вывод $id[] = $row["id"]; // Удаляем идентификатор из результирующего ответа клиенту unset($row["id"]); // Отдаем json клиенту echo "data:" . json_encode($row) . "\n\n"; } } ob_end_flush(); flush(); sleep(5); }

The code examples are pretty rough (it would be nice to make normal filtering of already shown coordinates. Solve a problem with a query that displays the entire contents of the table, etc.), but they are working. If you open the map and add data to the database, the marker will be displayed without reloading the page.

Browser support is at a good level, except that not everything is smooth with IE .

If you need a two-way exchange, you can use WebSocket .

It is not rational to use Ajax in this case, since the client needs to poll the server for data at intervals (each poll is a new http request), it generates more traffic.

EventSource | Using server-sent events