javascript - Retrieving values from a php service in HTML -
i trying build website displays google map user location (lat/long) php service wrote.
i have php script gets lat/long mobile app (via post client), stores in db, , read db 2 variables, let's call them $lat , $long. make sure have right values in $lat , $long, did simple echo , got 2 values.
i struggling understanding how read these values index.html script. examples have seen suggest keeping php code in html file rather keep them separate. not sure how assign these values parameters in html/javacript can display them on map.
so questions are: 1. how call php file html? 2. , how read $lat , $long php service , assign them parameters in html/javascript can display on map?
edit: here php code , index.html (which 1:1 copy google maps v3 docs).
location.php:
$content = file_get_contents('php://input'); $post_data = json_decode($content , true); $lat = $post_data['lat']; $long = $post_data['long']; //connect mysql $con1 = mysql_connect("localhost", "xxxxx", "yyyy", "zzzzz"); if ($con1->connect_error) { die("connection failed: " . $conn->connect_error); } } if (!$db_selected) { die ('can\'t use foo : ' . mysql_error()); } if (!empty($lat)) { $sql = "insert locationinfo (latitude, longitude) values ('$lat', '$long');"; mysql_query($sql) or die ('error updating database: ' . mysql_error()); } $read_query = "select * locationinfo;"; $results = mysql_query($read_query) or die ('error reading database: ' . mysql_error()); $column = array(); while($row = mysql_fetch_array($results)){ $column[] = $row; } $current_lat = $column[sizeof($column) - 1]['latitude']; $current_long = $column[sizeof($column) - 1]['longitude']; echo $current_lat; echo $current_long; ?> index.html:
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>my geolocation</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> <script> var map; function initialize() { var mapoptions = { zoom: 14 }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); if(navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { var pos = new google.maps.latlng(position.coords.latitude, position.coords.longitude); var infowindow = new google.maps.infowindow({ map: map, position: pos, content: 'location found using html5.' });
the easiest way variables in javascript output them php js, there no direct bridge, need in html output script block values got sql query, this:
<script> var lat = <?php echo $lat ?>; var long = <?php echo $long ?>; </script> now can use variables in javascripts invoke map, note can add variables definition main js block well.
edit: rename index.html index.php
<?php include_once('location.php') ?> <!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>my geolocation</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> <script> var map; function initialize() { // var mylatlng = new google.maps.latlng(<?php echo $lat ?>,<?php echo $long ?>); var mapoptions = { zoom: 14 //maptypeid: google.maps.maptypeid.roadmap //center: mylatlng }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); if(navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { var pos = new google.maps.latlng(position.coords.latitude, position.coords.longitude); var infowindow = new google.maps.infowindow({ map: map, position: pos, content: 'location found using html5.' });
Comments
Post a Comment