Flaque/collectMarkers.php

## collectMarkers.php
<html>
<?php

ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);

// Create connection

$link=mysqli_connect("localhost:8889","root","root", "mysql");


// Check connection
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    exit();
}

$query = "SELECT Title FROM Markers;";
$query .= "SELECT Description FROM Markers;";
$query .= "SELECT Lat FROM Markers;";
$query .= "SELECT Lon FROM Markers;";

$counter = 0;


if (mysqli_multi_query($link, $query)) {
    do {

        if ($counter == 0){
            $tresult = mysqli_store_result($link);
        } else if ($counter == 1){
            $dresult = mysqli_store_result($link);
        } else if ($counter == 2){
            $latresult = mysqli_store_result($link);
        } else if ($counter == 3){
            $lonresult = mysqli_store_result($link);

        } else if ($counter >= 4){
            echo "There's a problem";
            exit();
        }

        $counter += 1;

    } while (isThereMore());
}

function isThereMore(){
    global  $link;

    if (mysqli_more_results($link)){
        mysqli_next_result($link);
        return true;
    } else {
        return false;
    }

}


$titles = mysqli_fetch_all($tresult); //2d array with $titles[x][0] always 0
mysqli_free_result($tresult);
$descriptions = mysqli_fetch_all($dresult);
mysqli_free_result($dresult);
$lons = mysqli_fetch_all($lonresult);
mysqli_free_result($lonresult);
$lats = mysqli_fetch_all($latresult);
mysqli_free_result($latresult);

?>


<input type="hidden" id="lons" value=<?php echo json_encode($lons); ?>>
<input type="hidden" id="lats" value=<?php echo json_encode($lats); ?>>
</html>

## maps.js
var map;
var currentMarker = null;

function initialize() {

        $.get( "collectMarkers.php", function() {
            createAllMarkers();
        });


        console.log("intialize... ");

	var myLat = new google.maps.LatLng(-34.397, 150.644);

 	var mapOptions = {
            zoom: 7,
            center: myLat,
            disableDoubleClickZoom: true
        };

  	map = new google.maps.Map(document.getElementById('map-canvas'),
     	mapOptions);

	google.maps.event.addListener(map, 'dblclick', function(event) {

   		currentMarker = placeMarker(event.latLng);


                //html form added to the infowindow
                var contentString = '<html>' + '<form action="toTable.php" method="post">'
                    +  '<label> Title </label>'
                    + '<input type = "text" name = "title" class="form-control" placeholder="Ex: Makeout Point">'+
                    '<label> Description </label>'
                    + '<textarea type = "text" name = "des" placeholder="Ex: Super Private, pretty safe, romantic"  rows = "3" class="form-control"></textarea>'
                    + '<input id = "lat" type= "hidden" name = "lat" value = 5>' //Value defaults at 5 so I know if it's not working
                    +'</input>'
                    + '<input  id= "lon" type= "hidden" name = "lon" value = 5>'
                    + '</input>'
                    + '<div style="padding-top: 5%; text-align: center;">'
                    + '<input type="submit" name = "submit" onclick = "sendMarkerLocToSQL()" >'
                    + '</div>' +
                    '</form>'  + '</html>';

                //init Pop up from the marker
                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                infowindow.open(map,currentMarker); //Opens the pop up
	});
}

function getLat(){
    return currentMarker.getPosition().lat();
}

function getLon(){
    return currentMarker.getPosition().lng();
}

function createAllMarkers(){

    var markerLatArray = JSON.parse(document.getElementById("lats").value());
    var markerLonArray = JSON.parse(document.getElementById("lons").value());

        for (var i = 0; i < markerLatArray.length; i++){
            for (var j = 0; j < markerLatArray[i].length; j++){
                console.log(markerLatArray[i][0]);
                placeMarker(new google.maps.LatLng(markerLatArray[i][0], markerLonArray[i][0]));
            }
        }
}

function placeMarker(location) {

    var marker = new google.maps.Marker({
        position: location,
        map: map
    });

    return marker;
}

// THIS IS THE FUNCTION to look at (I think)
function sendMarkerLocToSQL() {
    document.getElementById("lon").setAttribute("value",getLon());
    document.getElementById("lat").setAttribute("value",getLat());
}

function removePopUp(){
    infowindow.close();
}

function removeMarker(inMarker){
	inMarker.setMap(null);
}

google.maps.event.addDomListener(window, 'load', initialize);
	<html>
	<?php

	ini_set('display_errors', 'On');
	error_reporting(E_ALL \| E_STRICT);

	// Create connection

	$link=mysqli_connect("localhost:8889","root","root", "mysql");



	// Check connection
	if (mysqli_connect_errno()) {
	echo "Failed to connect to MySQL: " . mysqli_connect_error();
	exit();
	}

	$query = "SELECT Title FROM Markers;";
	$query .= "SELECT Description FROM Markers;";
	$query .= "SELECT Lat FROM Markers;";
	$query .= "SELECT Lon FROM Markers;";

	$counter = 0;


	if (mysqli_multi_query($link, $query)) {
	do {

	if ($counter == 0){
	$tresult = mysqli_store_result($link);
	} else if ($counter == 1){
	$dresult = mysqli_store_result($link);
	} else if ($counter == 2){
	$latresult = mysqli_store_result($link);
	} else if ($counter == 3){
	$lonresult = mysqli_store_result($link);

	} else if ($counter >= 4){
	echo "There's a problem";
	exit();
	}

	$counter += 1;

	} while (isThereMore());
	}

	function isThereMore(){
	global $link;

	if (mysqli_more_results($link)){
	mysqli_next_result($link);
	return true;
	} else {
	return false;
	}

	}


	$titles = mysqli_fetch_all($tresult); //2d array with $titles[x][0] always 0
	mysqli_free_result($tresult);
	$descriptions = mysqli_fetch_all($dresult);
	mysqli_free_result($dresult);
	$lons = mysqli_fetch_all($lonresult);
	mysqli_free_result($lonresult);
	$lats = mysqli_fetch_all($latresult);
	mysqli_free_result($latresult);

	?>



	<input type="hidden" id="lons" value=<?php echo json_encode($lons); ?>>
	<input type="hidden" id="lats" value=<?php echo json_encode($lats); ?>>
	</html>
	var map;
	var currentMarker = null;

	function initialize() {

	$.get( "collectMarkers.php", function() {
	createAllMarkers();
	});


	console.log("intialize... ");

	var myLat = new google.maps.LatLng(-34.397, 150.644);

	var mapOptions = {
	zoom: 7,
	center: myLat,
	disableDoubleClickZoom: true
	};

	map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);

	google.maps.event.addListener(map, 'dblclick', function(event) {

	currentMarker = placeMarker(event.latLng);


	//html form added to the infowindow
	var contentString = '<html>' + '<form action="toTable.php" method="post">'
	+ '<label> Title </label>'
	+ '<input type = "text" name = "title" class="form-control" placeholder="Ex: Makeout Point">'+
	'<label> Description </label>'
	+ '<textarea type = "text" name = "des" placeholder="Ex: Super Private, pretty safe, romantic" rows = "3" class="form-control"></textarea>'
	+ '<input id = "lat" type= "hidden" name = "lat" value = 5>' //Value defaults at 5 so I know if it's not working
	+'</input>'
	+ '<input id= "lon" type= "hidden" name = "lon" value = 5>'
	+ '</input>'
	+ '<div style="padding-top: 5%; text-align: center;">'
	+ '<input type="submit" name = "submit" onclick = "sendMarkerLocToSQL()" >'
	+ '</div>' +
	'</form>' + '</html>';

	//init Pop up from the marker
	var infowindow = new google.maps.InfoWindow({
	content: contentString
	});

	infowindow.open(map,currentMarker); //Opens the pop up
	});
	}

	function getLat(){
	return currentMarker.getPosition().lat();
	}

	function getLon(){
	return currentMarker.getPosition().lng();
	}

	function createAllMarkers(){

	var markerLatArray = JSON.parse(document.getElementById("lats").value());
	var markerLonArray = JSON.parse(document.getElementById("lons").value());

	for (var i = 0; i < markerLatArray.length; i++){
	for (var j = 0; j < markerLatArray[i].length; j++){
	console.log(markerLatArray[i][0]);
	placeMarker(new google.maps.LatLng(markerLatArray[i][0], markerLonArray[i][0]));
	}
	}
	}

	function placeMarker(location) {

	var marker = new google.maps.Marker({
	position: location,
	map: map
	});

	return marker;
	}

	// THIS IS THE FUNCTION to look at (I think)
	function sendMarkerLocToSQL() {
	document.getElementById("lon").setAttribute("value",getLon());
	document.getElementById("lat").setAttribute("value",getLat());
	}

	function removePopUp(){
	infowindow.close();
	}

	function removeMarker(inMarker){
	inMarker.setMap(null);
	}

	google.maps.event.addDomListener(window, 'load', initialize);