javascript - Google Maps Multiple Markers. What is wrong with my code? -
so have code below. doesn't show when run it. white blank page on browser. should googlemap markers(multiple) on it. want know wrong code because doesn't show error @ all.
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>google maps multiple markers</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <div id="map" style="width: 500px; height: 400px;"></div> <?php include 'location.php';?> <script type="text/javascript"> var locations = <?php echo json_encode($location); ?>; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 10, center: new google.maps.latlng(6.40, 125.60), maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow(); var marker, i; (i = 0; < locations.length; i++) { loc_array = locations[i].split(","); marker = new google.maps.marker({ position: new google.maps.latlng(loc_array[1], loc_array[2]), map: map }); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(loc_array[0]); infowindow.open(map, marker); } })(marker, i)); } </script> </body> </html>and location.php file contains following data:
<?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "tsunami_simulation"; // create connection $conn = mysqli_connect($servername, $username, $password, $dbname); // check connection if (!$conn) { die("connection failed: " . mysqli_connect_error()); } //======================================================== $sql='select a.household_name, b.latitude, b.longitude household a, location b a.household_id = b.household_id;'; $result = mysqli_query($conn, $sql); if(mysqli_num_rows($result) > 0){ // output data of each row //while($row = mysqli_fetch_assoc($result)) { //echo "household name: " . $row["household_name"]. " - latitude: " . $row["latitude"]. " - longitude " . $row["longitude"] ."<br>"; //} for($i=0;$i<mysqli_num_rows ( $result );$i++){ $row=mysqli_fetch_row($result); $location[]= $row[0].', '.$row[2].', '.$row[1].','.($i+1); } }else{echo "0 results";} ?>
first of have syntax error right here
var locations = <?php echo json_encode($location); ?>; change
var locations = "<?php echo json_encode($location); ?>"; after should have string in locations variable have create object
locations = json.parse(locations) i did , seems work
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>google maps multiple markers</title> <script src="http://maps.google.com/maps/api/js" type="text/javascript"></script> </head> <body> <div id="map" style="width: 500px; height: 400px;"></div> <?php $locations[] = 'name,6.00,125.50'; $locations[] = 'name,6.05,125.55'; $locations[] = 'name,6.10,125.60'; $locations[] = 'name,6.15,125.65'; $locations[] = 'name,6.20,125.70'; $locations[] = 'name,6.25,125.75'; ?> <script type="text/javascript"> var locations = '<?php echo json_encode($locations); ?>'; locations = json.parse(locations) var map = new google.maps.map(document.getelementbyid('map'), { zoom: 10, center: new google.maps.latlng(6.40, 125.60), maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow(); (var = 0; < locations.length; i++) { loc_array = locations[i].split(","); var marker = new google.maps.marker({ position: new google.maps.latlng(loc_array[1], loc_array[2]), map: map }); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(loc_array[0]); infowindow.open(map, marker); } })(marker, i)); } </script> </body> </html>
Comments
Post a Comment