Gmap3 Google Maps using a geocoded location to center the map

Question

I am using Gmap3 http://gmap3.net/ to calculate customer location from stockists of products. I can pull the addresses of the suppliers off the mysql db ok using php, but im not sure how to go about using the geocoded address in the first part to center the map on that location.

The geocoded marker appears on the map just fine, but im not sure how to centre the map onto it.

What I tried is center:latLng, but that doesnt seem to work.

    <script type="text/javascript">

      $(function(){

        $('#test1').gmap3({
            getlatlng:{
    address:  "Paris, France",
    callback: function(results){
      if ( !results ) return;
      $(this).gmap3({
        marker:{
          latLng:results[0].geometry.location,
                 }
      });
    }
  },
          map:{
            options:{
              center:[52.9045147,-2.1685132],
              zoom: 6
            }
          },
          marker:{
            values:[
                <?php
    include '../connect.php';
$sql = <<<SQL
SELECT * FROM `suppliers`
SQL;
if(!$result = $db->query($sql)){ die('There was an error running the query [' . $db->error . ']');}
while($row = $result->fetch_assoc()){
echo '{address:"'.$row['address'].'", data:"'.$row['name'].'"},';
    }
    ?>

            //  {address:"66000 Perpignan, France", data:"Perpignan ! <br> GO USAP !", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}}
            ],
            options:{
              draggable: false
            },
            events:{
              mouseover: function(marker, event, context){
                var map = $(this).gmap3("get"),
                  infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.open(map, marker);
                  infowindow.setContent(context.data);
                } else {
                  $(this).gmap3({
                    infowindow:{
                      anchor:marker, 
                      options:{content: context.data}
                    }
                  });
                }
              },
              mouseout: function(){
                var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.close();
                }
              }
            }
          }
        });
      });
    </script>

Answer 1

This appears to work :

          $(function(){

            $('#test1').gmap3({
                            getlatlng:{
        address:  "Paris, France",
        callback: function(results){
          if ( !results ) return;
          $(this).gmap3({
               map:{
                options:{
                  center:results[0].geometry.location,
                  zoom: 6
                }
              },
                     marker:{
              latLng:results[0].geometry.location,  
                     }
          });
        }
      },

              marker:{
                values:[
                    <?php
        include '../connect.php';
    $sql = <<<SQL
    SELECT * FROM `suppliers`
    SQL;
    if(!$result = $db->query($sql)){ die('There was an error running the query [' . $db->error . ']');}
    while($row = $result->fetch_assoc()){
    echo '{address:"'.$row['address'].'", data:"'.$row['name'].'"},';
        }
        ?>

                //  {address:"66000 Perpignan, France", data:"Perpignan ! <br> GO USAP !", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}}
                ],
                options:{
                  draggable: false
                },
                events:{
                  mouseover: function(marker, event, context){
                    var map = $(this).gmap3("get"),
                      infowindow = $(this).gmap3({get:{name:"infowindow"}});
                    if (infowindow){
                      infowindow.open(map, marker);
                      infowindow.setContent(context.data);
                    } else {
                      $(this).gmap3({
                        infowindow:{
                          anchor:marker, 
                          options:{content: context.data}
                        }
                      });
                    }
                  },
                  mouseout: function(){
                    var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                    if (infowindow){
                      infowindow.close();
                    }
                  }
                }
              }
            });
          });