CODEWITHSUNDEEP
javascriptphpjquerygoogle-maps
JamesF
JamesF

Reputation: 67

Retrieving latitude and longitude from mysql, passing it to google maps api

I am a complete beginner and just wanting to know if there is a simple was of passing these locations to google maps which is in a script in my HTML.

I can retrieve the coordinates fine like this

PHP (this works):

<?php
require_once "sql.php";

error_reporting(E_ALL ^ E_NOTICE);
ini_set('display_errors','On');

    $result = array();
    $result['success'] = false;

    $order_by = $_REQUEST['sort_by'];

    $query = "SELECT venue_name, latitude, longitude, id  FROM venues";
        if ($result_set = Sql::query($query)) {
            $result['success'] = true;
            $result['message'] = "All Venues" ;
            $rows = mysqli_num_rows($result_set);
            $result['rows'] = array();
            for ($i = 0; $i<$rows; $i++) {
                $tmpRow = mysqli_fetch_assoc($result_set);
                $result['rows'][$i] = $tmpRow;
            }
        } else {
             $result['message'] = "Failed to read Cafes" ;
        }

        print(json_encode($result));

JQuery (part of a separate .js, this works): 

function success_get_locations(response) {
if(response.success) {
    var cafe_loc = '';
    for (var i = 0; i < response.rows.length; i++) {
        var venue_name = response.rows[i].venue_name;
        var venue_lat = response.rows[i].latitude;
        var venue_long = response.rows[i].longitude;
        var id = response.rows[i].id;

        cafe_loc += venue_name + venue_lat + venue_long + id; 
    }
}

}

I just need to know how to add these locations from function success_locations() in my JQuery to google maps var locations [] which is in my HTML here:

<div id="map" style="width: 500px; height: 400px;"></div>

<script type="text/javascript">

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
</script>

thanks James

Upvotes: 0

Views: 2180

Answers (1)

Marc B
Marc B

Reputation: 360922

This bit doesn't make much sense:

    cafe_loc += venue_name + venue_lat + venue_long + id;

You're taking the nice array of results, sucking out the bits into individual variables, then concatentating them all into one big string. e.g. For your sample locations in the JS code, you'd actually be building

Bondi Beach-33.890542151.2748564

Why not just leave them as the array they are already? Or if the ordering of the array isn't correct, you could build a NEW array with the elements in the proper order:

locs_for_google = [];
for (var i = 0; i < response.rows.length; i++) {
   locs_for_google[i] = [
       response.rows[i].venue_name,
       response.rows[i].latitude,
       response.rows[i].longitude,
       response.rows[i].id
   ];
}

Upvotes: 1

Related Questions