0

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/

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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