how to center a google map based on user location

Question

I have this script that call posts as markers into a Google Maps:

<?php
$args = array( 'post_type' => 'braiders', 'posts_per_page' => -1 );
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ): ?>
<!-- WordPress has found matching posts -->
<div class="results-main-content">
    <div class="results-group-items">
        <?php $i = 1; ?>
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <?php if ( get_post_meta($post->ID, 'martygeocoderlatlng', true) !== '' ) : ?>
        <div class="result-list-items">
            <div class="results-left">
                <?php
                if ( has_post_thumbnail() ) {
                    // Get the post thumbnail URL
                    $feat_image = wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) );
                    ?>

                <a href="<?php the_permalink(); ?>"><div class="result-items-image" style="background-image: url(<?php echo $feat_image; ?>);">
                    <p><?php the_title(); ?>
                    </p>
                </div>
                </a>
                <?php } ?>
                <!-- .result-items-image -->
            </div>
            <!-- results-left -->
            <div class="result-right">
                <?php the_content(); ?>
            </div>
            <!-- result-right -->
        </div>
        <!-- result-list-items -->
        <?php endif; ?>
        <?php $i++; ?>
        <?php endwhile; ?>
    </div>
    <!-- results-group-items -->
   </div>
   <!-- .results-main-content -->
  <script type="text/javascript">
   var locations = [
       <?php  $i = 1; while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <?php if ( get_post_meta($post->ID, 'martygeocoderlatlng', true) !== '' ) : ?> {
        latlng: new google.maps.LatLng <?php echo get_post_meta($post->ID, 'martygeocoderlatlng', true); ?>,
        info: document.getElementById( 'item<?php echo $i; ?>' )
    },
    <?php endif; ?>
     <?php $i++; endwhile; ?>
 ];
</script>

and this next script that displays the map based on manually coded latlng:

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

}

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.

Answer 1

You can use the following script:

if(navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    user_location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    map.setCenter(user_location);  
  });
 } else {
  /* Browser doesn't support Geolocation */
}       

Caveat: Some browsers do not support this without SSL. As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will no longer function.

Your code should now look like this:

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

    if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        user_location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(user_location);  
      });
     } else {
      /* Browser doesn't support Geolocation */
    }   

}