<?php
        if(count($_FILES) > 0) {
          if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
            mysql_connect("", "", "");
            mysql_select_db ("");
            $imgData =addslashes(file_get_contents($_FILES['userImage']['tmp_name']));
            $imageProperties = getimageSize($_FILES['userImage']['tmp_name']);
            $sql = "INSERT INTO markers(imageFileType, image)
            VALUES('{$imageProperties['mime']}', '{$imgData}')";
            $current_id = mysql_query($sql) or die("Error:Problem on Image Insert" . mysql_error());
            if(isset($current_id)) {
                header("Location: imagedisplay.php");
            }
          }
        }
    ?>

<?php
        $conn = mysql_connect("", "", "");
        mysql_select_db("") or die(mysql_error());
        if(isset($_GET['image_id'])) {
        $sql = "SELECT imageFileType,image FROM markers WHERE id=" . $_GET['image_id'];
        $result = mysql_query("$sql") or die("Error: Problem retrieving Image BLOB" . mysql_error());
        $row = mysql_fetch_array($result);
        header("Content-type: " . $row["imageFileType"]);
        echo $row["image"];
        }
        mysql_close($conn);
    ?>

<?php
        $conn = mysql_connect("", "", "");
        mysql_select_db("");
        $sql = "SELECT id FROM markers ORDER BY id DESC LIMIT 1";
        $result = mysql_query($sql);
    ?>

    <?php
    while($row = mysql_fetch_array($result)) {
    ?>
     <img src="imageview.php?image_id=<?php echo $row["id"]; ?>" width="150" height="150"/>
    <?php
    }
    ?>

// Google map API
    var map;
    function initMap() {
        var mapCenter = {lat: -35.2807, lng: 149.1306}; // Creates a variable called 'mapCenter' with Canberra's latitude and longitude
        mapInitialize(); // Loads map

        function mapInitialize()
        {
                var googleMapOptions =
                {
                    center: mapCenter, // 'mapCenter' is Canberra's latitude and longitude
                    zoom: 14,
                    maxZoom: 17,
                    minZoom: 14,
                    streetViewControl: false, // Removes street view control from map
                    mapTypeControl: false, // Removes map controls from map
                    zoomControl: true, // Includes zoom controls on map
                    zoomControlOptions: {
                        position: google.maps.ControlPosition.RIGHT_CENTER, // Positions zoom controls to the right, centered on the map.
                    },
                    scaleControl: true, // Includes scale control for map
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    styles: [ // Map styles
                        {
                            featureType: 'all',
                            stylers: [
                                { saturation: 65 }
                            ]
                        },{
                            featureType: 'road.arterial',
                            elementType: 'geometry',
                            stylers: [
                                { hue: '#b82c5a' },
                                { saturation: 70 }
                            ]
                          },{
                            featureType: 'poi.business',
                            elementType: 'labels',
                            stylers: [
                                { visibility: 'off' }
                            ]
                        }
                    ]
                };

                map = new google.maps.Map(document.getElementById("map"), googleMapOptions);

                $.get("http://grace-portfolio.com/public-art-in-canberra/wp-content/themes/publicartincanberra/mapsql.php", function (data) {
                    $(data).find("marker").each(function () {
                          var title         = $(this).attr('title');
                          var image         = $(this).attr('image');
                          var description   = $(this).attr('description');
                          var location      = $(this).attr('location');
                          var point         = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lng')));
                          createMarker(point, title, image, description, location, false, false, false, false, "http://grace-portfolio.com/public-art-in-canberra/wp-content/uploads/2016/08/mapmarker.png");
                    });
                });

                // Content inside pop-up boxes for edit form
                google.maps.event.addListener(map, 'rightclick', function(event) {
                    var editPopupInfo = '<div class="edit_popup">'+
                    '<form action="ajax-save.php" method="POST" name="frmImage" id="SaveMarker" enctype="multipart/form-data">'+
                    '<label for="popUpPhoto"><span id="photo_title">Select photo : </span><input name="userImage" type="file" class="inputFile" id="public_art_photo"/>'+
                    '<label for="popUpName"><span>Title of public art : </span><input type="text" name="popupName" class="saveName" placeholder="Enter the title of the public art" maxlength="120" /></label>'+
                    '<label for="popUpDescription"><span>Description : </span><textarea name="popUpDescription" class="saveDescription" placeholder="Enter a description for the photo" maxlength="120"></textarea></label>'+
                    '<label for="dropDown"><span id="location_title">Location of public art : </span> <select name="dropDown" class="saveLocation"><option value="Belconnen">Belconnen</option><option value="Civic">Civic</option><option value="Gungahlin">Gungahlin</option><option value="North Canberra">North Canberra</option><option value="Parliamentary Triangle">Parliamentary Triangle</option><option value="South Canberra">South Canberra</option><option value="Tuggeranong">Tuggeranong</option>'+
                    '<option value="Woden">Woden</option></select></label>'+
                    '</form>'+
                    '</div><button value="Upload" name="save_button" class="save_button">Save</button>';

                    createMarker(event.latLng, 'New photo', editPopupInfo, true, true, true, true, "http://grace-portfolio.com/public-art-in-canberra/wp-content/uploads/2016/08/mapmarker.png");

                });

        }

        // Create marker function
        function createMarker(mapPosition, mapTitle, mapDescription, mapLocation, setDraggable, infoOpenDefault)
        {
            // New marker
            var marker = new google.maps.Marker({
                position: mapPosition,
                map: map,
                draggable: false, // Don't allow users to drag map markers they create
                animation: google.maps.Animation.DROP, // Animation for map markers
                icon: 'http://grace-portfolio.com/public-art-in-canberra/wp-content/uploads/2016/08/mapmarker.png'
            });


            // Structure of popup box information for the map markers
            var contentString = $('<div class="edit_popup">' + '<div class="markerpopUpInfoInner"><span class="markerpopUpInfoContent">' + '<h1 class="map_marker_heading">'+mapTitle+'</h1>' + '<p class="pop_up_info_description">'+mapDescription+'</p>' + '<p class="pop_up_location_description">'+mapLocation+'</p>' + '</span>' + '</div></div>');


            // Create a popup box (InfoWindow)
            var infowindow = new google.maps.InfoWindow();

            //set the content of infoWindow
            infowindow.setContent(contentString[0]);

            var saveButton = contentString.find('button.save_button')[0];

            if(typeof saveButton !== 'undefined')
            {
                google.maps.event.addDomListener(saveButton, "click", function(event) {
                    var aReplace = contentString.find('span.markerpopUpInfoContent');
                    var aTitle = contentString.find('input.saveName')[0].value;
                    var aImage = contentString.find('input.inputFile')[0].value;
                    var aDescription  = contentString.find('textarea.saveDescription')[0].value;
                    var aLocation = contentString.find('select.saveLocation')[0].value;

                    if(aTitle =='' || aImage =='' || aDescription =='') // If title and description are blank, show alert.
                    {
                        alert("Please upload a photo, and enter a title and description for the photo.");
                    } else {
                        saveMarker(marker, aTitle, aImage, aDescription, aLocation, aReplace);
                    }
                });
            }

            google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
            });

            if(infoOpenDefault)
            {
              infowindow.open(map, marker);
            }
        }

        // Save marker function
        function saveMarker(marker, aTitle, aImage, aDescription, aLocation, replaceWith)
        {

            var aLatLang = marker.getPosition().toUrlValue();
            var myData = {
                title : aTitle,
                image: aImage,
                description : aDescription,
                latlang : aLatLang,
                location : aLocation
            };

            console.log(replaceWith);
            $.ajax({
              type: "POST",
              url: "http://grace-portfolio.com/public-art-in-canberra/wp-content/themes/publicartincanberra/mapsql.php",
              data: myData,
              success: function(data){
                    replaceWith.html(data);
                    marker.setDraggable(false);
                    marker.setIcon("http://grace-portfolio.com/public-art-in-canberra/wp-content/uploads/2016/08/mapmarker.png");
                },
                error:function (xhr, ajaxOptions, thrownError){
                    alert(thrownError);
                }
            });
        }


    }

<?php

    //PHP 5 +

    include("imageupload.php"); // Includes imageupload.php file
    include("imageview.php"); // Includes imageview.php file
    include("imagedisplay.php"); // Includes imagedisplay.php file


    // Database settings
    $db_username = '';
    $db_password = '';
    $db_name = '';
    $db_host = '';

    //mysqli
    $mysqli = new mysqli($db_host, $db_username, $db_password, $db_name);

    if (mysqli_connect_errno())
    {
        die('Connect Error: ' . $mysqli->connect_errno);
    }


    if($_POST)
    {

        $xhr = $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
        if (!$xhr){
            header('HTTP/1.1 500 Error: Request must come from Ajax!');
            exit();
        }

        $aLatLang   = explode(',',$_POST["latlang"]);
        $aLat       = filter_var($aLatLang[0], FILTER_VALIDATE_FLOAT);
        $aLng       = filter_var($aLatLang[1], FILTER_VALIDATE_FLOAT);

        //Delete Marker
        if(isset($_POST["del"]) && $_POST["del"]==true)
        {
            $results = $mysqli->query("DELETE FROM markers WHERE lat=$aLat AND lng=$aLng");
            if (!$results) {
              header('HTTP/1.1 500 Error: Could not delete Markers!');
              exit();
            }
            exit();
        }

        $aTitle         = filter_var($_POST["title"], FILTER_SANITIZE_STRING);
        $aImage         = filter_var($_POST["image"], FILTER_SANITIZE_STRING);
        $aDescription   = filter_var($_POST["description"], FILTER_SANITIZE_STRING);
        $aLocation      = filter_var($_POST["location"], FILTER_SANITIZE_STRING);

        $results = $mysqli->query("INSERT INTO markers (title, imageFileType, image, description, lat, lng, location) VALUES ('$aTitle', '$aImageFileType', '$aImage', '$aDescription', $aLat, $aLng, '$aLocation')");
        if (!$results) {
              header('HTTP/1.1 500 Error: Could not create marker!');
              exit();
        }

        $output = '<h1 class="map_marker_heading">'.$aTitle.'</h1><p class="photo_description">'.$aDescription.'</p><p class="photo_location">'.$aLocation.'</p>';
        exit($output);
    }


    //Create a new DOMDocument object
    $dom = new DOMDocument("1.0");
    $node = $dom->createElement("markers");
    $parnode = $dom->appendChild($node);

    // Select all the rows in the markers table
    $results = $mysqli->query("SELECT * FROM markers WHERE 1");
    if (!$results) {
        header('HTTP/1.1 500 Error: Could not get markers!');
        exit();
    }

    //set document header to text/xml
    header("Content-type: text/xml");
    header("Content-type: jpg");

    // Iterate through the rows, adding XML nodes for each
    while($obj = $results->fetch_object())
    {
      $node = $dom->createElement("marker");
      $newnode = $parnode->appendChild($node);
      $newnode->setAttribute("title",$obj->title);
      $newnode->setAttribute("description", $obj->description);
      $newnode->setAttribute("lat", $obj->lat);
      $newnode->setAttribute("lng", $obj->lng);
      $newnode->setAttribute("location", $obj->location);
    }

    echo $dom->saveXML();