All,
Explanation of my idea:
I have a google maps with marker clusters on it. The markers are generated by coordinates being selected from a table from a database. If a marker is clicked it should show an info window with information that I specify in the code (for example: a name, address, etc.) That information should also be retrieved from the database. To do this, I decided to go with getting the coordinates from the clicked marker, store them in a variable(s) and use them to retrieve the right information from the database > store them also in one or different variables and add them to the infowindow with infowindow.setContent.
What got I working so far?
generating the google maps
adding the markers/cluster markers
info window being shown if a marker has been clicked
Where is the issue?
=> Passing the coordinates from the clicked marker (Javascript to PHP) where my database connection is being made and query to retrieve the info, pass it back to javascript to shown it in the info window. All this without refreshing the page and should work for each marker that is being clicked. Ofcourse each marker is going to give other information.
I first try to do this with passing the coordinates from the clicked marker in the url (without refreshing) but it only added the coordinates to the url and once I refreshed and clicked a marker it would show the information of the clicked marker before the refresh. So now trying with AJAX.
My question(s)
I read up and looks like this should be done with AJAX. First time using AJAX on this project. So still getting used to it. But is my general way of doing it good or can it be done another way? So passing Javascript to PHP and back to Javascript without refreshing the page. Iām also doing this in 1 PHP file (woninggespot.php). Should I work with different files?
Code - Javascript
function initMap()
{
//Options for the map
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(50.503887, 4.469936),
clickableIcons: false
};
//generate map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
//image marker
var imagemarker = './images/marker_small.png';
//info window
var infoWindow = new google.maps.InfoWindow();
//fill map with markers
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: imagemarker
});
google.maps.event.addListener(marker, 'click', function(evt) {
//AJAX
function post()
{
var latitude = evt.latLng.lat();
var longitude = evt.latLng.lng();
$.post('woninggespot.php',{latMarker:latitude,lngMarker:longitude});
}
//fill var's with values from database (from php)
var prijs = <?php echo json_encode($prijs); ?>;
var type = <?php echo json_encode($type); ?>;
var slaapkamers = <?php echo json_encode($slaapkamers); ?>;
infoWindow.setContent(prijs + type + slaapkamers);
infoWindow.open(map, marker);
});
return marker;
});
//Marker cluster
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: './googlemaps/markerclusterer/images/m'});
}
var locations = <?php echo "[".$array."]"; ?>;
</script>
Code - PHP
FYI: I left out the database connection code because itās not relevant here
<?php
//get lat and lng javascript when marker has been clicked
$latMarker = $_POST["latmarker"];
$lngMarker = $_POST["lngmarker"];
$clickedMarkerLocation = $latMarker . ", " . $lngMarker;
$query = mysqli_query($conn, "SELECT * FROM spotwoning WHERE coordinaten='$clickedMarkerLocation'");
while ($record = mysqli_fetch_assoc($query))
{
$prijs = $record['prijsklasse'];
$slaapkamers = $record['slaapkamers'];
$type = $record['typewoning'];
}
?>
Last update: (based on this found post: Link)
Javascript
function initMap()
{
//Options for the map
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(50.503887, 4.469936),
clickableIcons: false
};
//generate map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
//image marker
var imagemarker = './images/marker_small.png';
//create info window
var infoWindow = new google.maps.InfoWindow();
//fill map with markers
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: imagemarker
});
google.maps.event.addListener(marker, 'click', function(evt) {
//get coordinates from clicked marker
var latitude = evt.latLng.lat();
var longitude = evt.latLng.lng();
var prijs = <?php echo json_encode($prijs); ?>;
var type = <?php echo json_encode($slaapkamers); ?>;
var slaapkamers = <?php echo json_encode($type); ?>;
console.log(prijs + type + slaapkamers + latitude + ", " + longitude);
//var content = prijs + type + slaapkamers;
//set content from info window
infoWindow.setContent();
infoWindow.open(map, marker);
});
return marker;
});
PHP
<?php
//get lat and lng javascript when marker has been clicked
$latMarker = $_GET["latitude"];
$lngMarker = $_GET["longitude"];
$clickedMarkerLocation = $latMarker . ", " . $lngMarker;
$query2 = mysqli_query($conn, "SELECT * FROM spotwoning WHERE coordinaten='$clickedMarkerLocation'");
while ($record = mysqli_fetch_assoc($query2)) {
$prijs = $record['prijsklasse'];
$slaapkamers = $record['slaapkamers'];
$type = $record['typewoning'];
};
?>