title: how to center a google map based on user location
body: <p>I have this script that call posts as markers into a Google Maps:</p>
  
  <pre><code>&lt;?php
  $args = array( 'post_type' =&gt; 'braiders', 'posts_per_page' =&gt; -1 );
  $the_query = new WP_Query( $args );
  if ( $the_query-&gt;have_posts() ): ?&gt;
  &lt;!-- WordPress has found matching posts --&gt;
  &lt;div class="results-main-content"&gt;
      &lt;div class="results-group-items"&gt;
          &lt;?php $i = 1; ?&gt;
          &lt;?php while ( $the_query-&gt;have_posts() ) : $the_query-&gt;the_post(); ?&gt;
          &lt;?php if ( get_post_meta($post-&gt;ID, 'martygeocoderlatlng', true) !== '' ) : ?&gt;
          &lt;div class="result-list-items"&gt;
              &lt;div class="results-left"&gt;
                  &lt;?php
                  if ( has_post_thumbnail() ) {
                      // Get the post thumbnail URL
                      $feat_image = wp_get_attachment_url( get_post_thumbnail_id( $post-&gt;ID ) );
                      ?&gt;
  
                  &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;div class="result-items-image" style="background-image: url(&lt;?php echo $feat_image; ?&gt;);"&gt;
                      &lt;p&gt;&lt;?php the_title(); ?&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;/a&gt;
                  &lt;?php } ?&gt;
                  &lt;!-- .result-items-image --&gt;
              &lt;/div&gt;
              &lt;!-- results-left --&gt;
              &lt;div class="result-right"&gt;
                  &lt;?php the_content(); ?&gt;
              &lt;/div&gt;
              &lt;!-- result-right --&gt;
          &lt;/div&gt;
          &lt;!-- result-list-items --&gt;
          &lt;?php endif; ?&gt;
          &lt;?php $i++; ?&gt;
          &lt;?php endwhile; ?&gt;
      &lt;/div&gt;
      &lt;!-- results-group-items --&gt;
     &lt;/div&gt;
     &lt;!-- .results-main-content --&gt;
    &lt;script type="text/javascript"&gt;
     var locations = [
         &lt;?php  $i = 1; while ( $the_query-&gt;have_posts() ) : $the_query-&gt;the_post(); ?&gt;
      &lt;?php if ( get_post_meta($post-&gt;ID, 'martygeocoderlatlng', true) !== '' ) : ?&gt; {
          latlng: new google.maps.LatLng &lt;?php echo get_post_meta($post-&gt;ID, 'martygeocoderlatlng', true); ?&gt;,
          info: document.getElementById( 'item&lt;?php echo $i; ?&gt;' )
      },
      &lt;?php endif; ?&gt;
       &lt;?php $i++; endwhile; ?&gt;
   ];
  &lt;/script&gt;
  </code></pre>
  
  <p>and this next script that displays the map based on manually coded latlng:</p>
  
  <pre><code> var infowindow = new google.maps.InfoWindow();
   var pinkmarker = new google.maps.MarkerImage('/wp-   content/themes/halfempty/pink_Marker.png', new google.maps.Size(18, 32) );
   var shadow = new google.maps.MarkerImage('/wp-   content/themes/halfempty/shadow.png', new google.maps.Size(37, 34) );
  
   function initialize() {
   map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
      center: new google.maps.LatLng(35.1495343, -90.0489801), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
  });
  
  for (var i = 0; i &lt; locations.length; i++) {  
      var marker = new google.maps.Marker({
          position: locations[i].latlng,
          icon: pinkmarker,
          shadow: shadow,
          map: map
      });
      google.maps.event.addListener(marker, 'click', (function(marker, i)   {
        return function() {
          infowindow.setContent(locations[i].info);
          infowindow.open(map, marker);
        }
      })(marker, i));
     }
  
  }
  </code></pre>
  
  <p>I would like to know how to alter the above .js script that centers the Google to actually center the map based on user location when they access the page through their browser?
  All I know is I need to dynamically pull the latlng of the visitor/user instead of manually coding it.
  Thank you for taking a crack at it.</p>