Using the loop to set locations for all posts on a single google map

Question

Firstly, hi all! I am new to worpress stackexchange.

I have been trying to build my own google map to show the location of all my posts. But I don't seem to be able to get the markers to display on the map.

Edit: I have changed the code a bit since my origional post, I am now returning data but with errors.

This is the data being returned:

<div style="display: none;">  
 <div id="item1">
     <p><a href="http://localhost:8888/?p=39">Dubai</a></p>
     <p>Testing the plugin even more</p>
 </div>
 <div id="item2">
<p><a href="http://localhost:8888/?p=36">Sydney</a></p>
<p>Still testing the plugin</p>
 </div>
 <div id="item3">
<p><a href="http://localhost:8888/?p=30">Singapore</a></p>
<p>Testing Plugin</p>
 </div>
 <div id="item4">
    <p><a href="http://localhost:8888/?p=7">Abu Dhabi</a></p>
<p>This is a test of the Maps</p>
 </div>
</div>

<script type="text/javascript">
var locations = [
{ 
 latlng : new google.maps.LatLng(25.271139, 55.30748500000004),
 },
{
 latlng : new google.maps.LatLng(-33.8379509, 151.22268610000003),
},
{
 latlng : new google.maps.LatLng(1.3783339, 103.80423819999999),
},
{
 latlng : new google.maps.LatLng(24.4666667, 54.366666699999996),
},
];
</script>

And this is the maps.js file:

var infowindow = new google.maps.InfoWindow();
var pinkmarker = new google.maps.MarkerImage('/wp-content/themes/travel-bones/library/images/pink_Marker.png', new google.maps.Size(20, 34) );
var shadow = new google.maps.MarkerImage('/wp-content/themes/travel-bones/library/images/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(38.898748, -77.037684), 
        navigationControl: false,
            backgroundColor:'none',
            streetViewControl: false,
        mapTypeControl: false,
        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));
    }

}

And then this is how I am doing the query in the index.php

<?php if ( have_posts() ) : ?>

            <div style="display: none;">
                <?php $i = 1; ?>
                <?php while ( have_posts() ) : the_post(); ?>
                    <?php if ( get_geocode_latlng($post->ID) !== '' ) : ?>
                        <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_geocode_latlng($post->ID) !== '' ) : ?>
                                       {
                                               latlng : new google.maps.LatLng<?php echo get_geocode_latlng($post->ID); ?>,
                                       },
                                       <?php endif; ?>
                               <?php $i++; endwhile; ?>
                               ];
            </script>
            <div id="map" style="width: 100%; height: 100%;"></div>

        <?php else : ?>
            <!-- No matching posts, show an error -->
            <h1>Error 404 &mdash; Page not found.</h1>
        <?php endif; ?>

The query is obviously working as the results are being returned. However I am getting this error on the maps.js file:

for (var i = 0; i < locations.length; i++) {  
Uncaught TypeError: Cannot read property 'length' of undefined

And this error where the queried content shows...

var locations = [

latlng : new google.maps.LatLng(25.271139, 55.30748500000004),
Uncaught ReferenceError: google is not defined
                                       },

This is the tutorial I have been following... code is modified to pull lnt/lng data from a geocoder pulgin. http://martyspellerberg.com/2012/02/tutorial-integrating-wordpress-and-google-maps-api-v-3/

Answer 1

I have managed to find the problem.

Basically calling the google API from the footer was causing the maps to break and not function properly.