Locate authors on Google map version 3

by 
<script type="text/javascript">
var infowindow = new google.maps.InfoWindow();
var pinkmarker = new google.maps.MarkerImage('/wp-content/themes/mapdemo/pink_Marker.png', new google.maps.Size(20, 34) );
var shadow = new google.maps.MarkerImage('/wp-content/themes/mapdemo/shadow.png', new google.maps.Size(37, 34) );

    function initialize() {
    map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 6, 
        center: new google.maps.LatLng(37.5407246, -77.4360481), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    });

    for (var i = 0; i < locations.length; i++) {  
        var marker = new google.maps.Marker({
            position: locations[i].geometry.location,
            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));
    }

     }
     </script>

in the body

<?php if ( have_posts() ) : ?>
<!-- WordPress has found matching posts -->
<div style="display: none;">
  <?php $i = 1; ?>
  <?php while ( have_posts() ) : the_post(); ?>
  <?php if ( get_post_meta($post->ID, 'latlng', true) !== '' ) : ?>
  <div id="item<?php echo $i; ?>">
    <p><a href="https://wordpress.stackexchange.com/questions/54522/<?php the_permalink(); ?>">
      <?php the_title(); ?>
      </a></p>
    <?php the_content(); ?>
  </div>
  <?php endif; ?>
  <?php $i++;   ?>
  <?php endwhile; ?>
</div>
<script type="text/javascript">
                var locations = [
                    <?php  $i = 1; while ( have_posts() ) : the_post(); ?>
                        <?php if ( get_post_meta($post->ID, 'latlng', true) !== '' ) : ?>
                            {
                                latlng : new google.maps.LatLng<?php echo get_post_meta($post->ID, 'latlng', true); ?>, 
                                info : document.getElementById('item<?php echo $i; ?>')
                        },
                        <?php endif; ?>
                    <?php $i++; endwhile; ?>
                ];
            </script>
<div id="map" style="width: 100%; height: 700px;"></div>
<?php else : ?>
<!-- No matching posts, show an error -->
<h1>Error 404 &mdash; Page not found.</h1>
<?php endif; ?>

I have some difficulty switching from longitude and latitude to address. I will appreciate any help in the right direction.

1 Answer
1

If you’d like to show actual address as in street name/number you should use reverse geo coding api https://developers.google.com/maps/documentation/geocoding/#ReverseGeocoding basically its something like http://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&sensor=false which you should probably on publish/save post (not on every page load).

If you just like to show the markers on the map, I did something similar a couple of years ago with some code to looks very similar to yours (custom markers/info-pains), my locations array looks like so:

<?php
if ( $places_query->have_posts() ) {
    while ( $places_query->have_posts() ) {
        $places_query->the_post();
        $user_location['lat'] = get_post_meta( $post->ID, 'geo_latitude', true );
        $user_location['lng'] = get_post_meta( $post->ID, 'geo_longitude', true );
        $places[] = $user_location;
    }
}
?>

and the actual array:

<script type="text/javascript">
    places =  <?php echo json_encode($places); ?>; //places is your var locations
</script>

so the difference is that I’m doing json_encode to the array which is sent to the maps rendering function.

Hope that helps!

Leave a Comment