Hope this is the correct forum to place this question.
How would i run a php script in a javascript file? I have a php script named connection.php, it accesses a mysql database and runs queries. I would like to run the php script from a javascript file named initializeMap.js. The files are shown below with the php shown first.
$servername = "localhost";
$username = "root";
$password = "";
// Create connection
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error)
{
die("Connection failed: " . $conn->connect_error);
}
$query = "SELECT site,latitude,longitude,pollution FROM pollution_monitoring.locations";
$result = mysqli_query($conn,$query);
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC))
{
$site=$row['site'];
$latitude=$row['latitude'];
$longitude=$row['longitude'];
$pollution=$row['pollution'];
echo ("addMarker($latitude,$longitude,'<b>$site</b><br/>$pollution');\n");
}
and the java script is
$("#googleMap").load('connection.php');
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/red.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
google.maps.event.addDomListener(window, 'load', initialize);
function addMarker(lat,lng,info)
{
var pt = new google.maps.LatLng(lat,lng);
bounds.extend(pt);
var marker = new google.maps.MarkerImage({position:pt, icon:icon,map:map});
var popup = new google.maps.InfoWindow({content:info, maxWidth:500});
google.maps.event.addListener(marker,"click",function()
{
if(currentPopup !== null)
{
currentPopup.close();
currentPopup = close;
}
}
);
google.maps.event.addListener(popup,"closeclick",function()
{
map.panTo(center);
currentPopup = null;
}
);
}
function initialize()
{
var mapProp =
{
center:new google.maps.LatLng(-29.335989,27.483622999999966),
zoom:17,
mapTypeId:google.maps.MapTypeId.HYBRID,
mapTypeControl:true,
zoomControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR},navigationControl: true,navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
}
};
//php script is to run here
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addDomListener(window, 'load', initialize);
}
I am doing this so ii can plot markers on a google map with the markers comming from a database. the output of the php file (ran independently) is
addMarker(-29.3136256880662,27.480760216713,'<b>Pioneer Kingsway</b><br/>364.9883117675 (PPM)');
addMarker(-29.3150382892309,27.486897110939,'<b>Parliament Kingsway</b><br/>364.0746765136 (PPM)');
addMarker(-29.3147029,27.5021021,'<b>Lakeside</b><br/>364.9379577636 (PPM)');
addMarker(-29.306296,27.486722,'<b>Limkokwing</b><br/>363.6354675292 (PPM)');
addMarker(-29.312631,27.489722,'<b>Central Bank</b><br/>363.7650146484 (PPM)');
addMarker(-29.298105,27.454757,'<b>Maseru Bridge</b><br/>364.5924377441 (PPM)');
addMarker(-29.316783,27.476915,'<b>Pioneer Mall</b><br/>363.5439453125 (PPM)');
I would like the marker to be added to google with the coordinates and have the last parameter to the function (addMarker) be displayed when the marker is cliked on. I am able to get the google maps but I cannot figure out how to add the markers. what i would like to have is the markers be displayed. i hope my question is clear.
