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>

possible duplicate of [Google Map API v3 - Centre Map on Markers](http://stackoverflow.com/questions/10736653/google-map-api-v3-centre-map-on-markers) — Naeem Shaikh, May 09 '14 at 15:13
That answer talks about centering the map on markers, I just want to center the map on a geocoded location on initialisation, plus that is the google maps api, where as this is gmap3 a jquery script that uses the google maps api, but also has its own commands for things. — Iain Simpson, May 12 '14 at 07:49

score 0 · Accepted Answer · answered May 12 '14 at 08:46

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();
                    }
                  }
                }
              }
            });
          });

Gmap3 Google Maps using a geocoded location to center the map

1 Answers1