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.

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/

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer

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.