I have three Javascript functions:
Function 1) Load a google map and markers for it from an XML file and pass them to function 2.
Function 2) Create markers on the map using the data from function 1.
Function 3) Load users who are connected to the marker/event, using a request to the database with Ajax.
I call function 3 from within function 2 like this, to get the string function 3 produces:
var memberslist = showEventMembers(MapTitle)
but when I reference the string the string undefined
is only printed out to the HTML. I don't understand why the value from function 3 is not passed to var memberlist
in function 2.
Function 3 returns a string of the users, I have confirmed this by using document.getElementById("event_members").innerHTML = this.responseText;
, and it changes the text of a div object I placed outside of script tags. It can however not change the html-text of the span tag that I generate within function 2.
So what I need is to pass the returned value of function 3 to the script generated HTML tags within function 2, but I cant get it to work with either replacing the HTML, or by passing a value to a variable and use that variable in the generated HTML.
Hope my question is clear enough, English isn't my first language, any help is really appreciated!
(I use jQuery and Laravel if it's of any importance, the PHP is in a Laravel "controller").
Function1 / Load map and marker data:
$(document).ready(function() {
var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates
map_initialize(); // initialize google map
function map_initialize() {
var googleMapOptions = {
center: mapCenter, // map center
zoom: 17, //zoom level, 0 = earth view to higher value
panControl: true, //enable pan Control
zoomControl: true, //enable zoom control
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("map"), googleMapOptions);
//var map = new google.maps.Map(document.getElementById('map'), {
// zoom: 4,
// center: {lat: -25.363882, lng: 131.044922 }
//});
//Load Markers from the XML File, Check (/laravel/stumbler/stumbler/public/phppages/map_process.php)
$.get("/laravel/stumbler/stumbler/markerxml", function(data) {
$(data).find("marker").each(function() {
//Get user input values for the marker from the form
var author = $(this).attr('author');
var name = $(this).attr('name');
var address = '<p>' + $(this).attr('address') + '</p>';
var type = $(this).attr('type');
var point = new google.maps.LatLng(parseFloat($(this).attr('lat')), parseFloat($(this).attr('lng')));
//call create_marker() function for xml loaded maker
create_marker(author, point, name, address, false, false, false, "/laravel/stumbler/stumbler/public/images/icons/pin_blue.png");
});
});
//drop a new marker on right click
google.maps.event.addListener(map, 'rightclick', function(event) {
//Edit form to be displayed with new marker
var EditForm = '<p><div class="marker-edit">' +
'</div></p>';
//call create_marker() function
create_marker('', event.latLng, 'Exiting event!', 'Log in or Sign up to create an event here :)', true, true, true, "/laravel/stumbler/stumbler/public/images/icons/pin_green.png");
});
}
});
Function 2 / Create markers and put on the map
function create_marker(MapAuth, MapPos, MapTitle, MapDesc, InfoOpenDefault, DragAble, Removable, iconPath) {
//new marker
var marker = new google.maps.Marker({
position: MapPos,
map: map,
draggable: DragAble,
animation: google.maps.Animation.DROP,
title: "Hello World!",
icon: iconPath
});
showEventMembers(MapTitle);
var memberslist = showEventMembers(MapTitle);
//Content structure of info Window for the Markers
var contentString = $('<div class="marker-info-win">' +
'<div class="marker-inner-win"><span class="info-content">' +
'<h1 class="marker-heading">' + MapTitle + '</h1>' +
MapDesc + '<p><strong>Creator: </strong>' + MapAuth + '</p>' +
'</span>' +
'Event members: ' + '<span id="event_members">This text is not being replaced</span><br>' +
memberslist + //this returns the string "undefined"
'<p><br>Sign up or Log in to join this event!</p>' +
'</div></div>');
//Create an infoWindow
var infowindow = new google.maps.InfoWindow();
//set the content of infoWindow
infowindow.setContent(contentString[0]);
// add click listener for the marker
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker); // click on marker opens info window
});
if (InfoOpenDefault) //whether info window should be open by default
{
infowindow.open(map, marker);
}
}
Function 3 / Load users who are connected to the event
function showEventMembers(str) {
if (str == "") {
document.getElementById("event_members").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("event_members").innerHTML = this.responseText;
return this.responseText;
}
};
xmlhttp.open("GET", "/laravel/stumbler/stumbler/get_event_members/" + str);
xmlhttp.send();
}
}
The PHP (That returns the users and marker connections)
public function get_event_members($eventname){
$signed_up_users = DB::table('users_to_events')->where('event_name', '=', $eventname)->get();
$userlist ="";
foreach ($signed_up_users as $signed_up_user)
{
$userlist .= $signed_up_user->username.'<br>';
}
exit($userlist);}