Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
<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="<?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.

share|improve this question
add comment

1 Answer

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!

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.