Евгений

Скажу по секрету, есть куча бесплатных хостингов с поддержкой php, mysql
Вот например https://ru.000webhost.com/

Зачем изобретать велосипед, когда за тебя уже изобрели всё?
Я конечно ещё далеко не скиловый php-шник, но ваша проблема решается легко фреймворком Yii2 за пару часов на коленях.

А как вы собираетесь хранить статьи вовсе загадка природы. Неужели в txt-файле.

В любом случае Б - Безопасность тут рядом не стояла

Читаем документацию с наглядным примером
https://developers.google.com/maps/documentation/j...

Или тут написано как сделать прогресс бар
https://www.w3schools.com/howto/howto_js_progressb...

Куки

<?php 
if(!empty($_POST)) {     
         SetCookie("email", $_POST['email'],time()+31536000);     
}

$email = !empty($_COOKIE['email']) ? $_COOKIE['email'] : '';

?>

<form>
    <input type="text" name="email" value="<?php echo $email; ?>" />
</form>

Почитайте Яндекс API
https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/conce...

Хвалят htmlacademy.ru

Там обучение верстке с практикой. Включая html 5 css3 и препроцессоры.

Себе недавно писал эту функцию, делал вот так

function initMap() {
                    var latlng = new google.maps.LatLng(lat, lon);
                    var mapOptions = {

                        center: latlng,
                        zoom: 14,
                        mapTypeControl: false,
                        streetViewControl: false,
                        styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
                    };

                    map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        title:"Вы знаходитесь в данном месте"
                    });
                }

Всё прекрасно работает

Я вот через аякс пытаюсь накидать.

но что-то не получается

var api_key = AIzaSyAsuS1MqzRBzRv1HRrfrlyoMRlkrVXEx0g;
    var cordinats = [23,45];
    var position = cordinats.join(",");
    var data = {ltlng:position,key:api_key};
    $.ajax({
        method:"GET",
        url:"https://maps.googleapis.com/maps/api/geocode/json",
        data:data,
        dataType:'json',
        success:function(result) {console.log(result)},
        error:function(err) {console.log("Ошибка сервера")},
        
    })
var data = JSON.parse(result); 
alert( data.formatted_address );