Display Google Street View instead of thumbnail on post preview

I think there’s at least a couple things going on here. It may be the view is not showing up for other posts because they have no featured image selected. The street view template only gets loaded if the post has a featured image because of the line above if( has_post_thumbnail( $post->ID )) {

It’s maybe safe to remove all of the if/else code and simply load the template part in all cases no matter what. Or you could ensure all posts have a featured image selected even if it is never used.

The mis-location might just be a CSS thing. Check the page’s HTML source. Does the street view container show up with the Valdes Dr content, or is it with the Avenida Chamnez content and mis-located by CSS? If the container is with the right property, maybe just a CSS adjustment is needed.

OTOH, if the container is with the wrong content, then the template is getting the address data from the wrong post. This would be because either it’s not using global $post->ID or it’s (more likely) only getting the post ID after the loop has concluded.

If it’s getting the post ID after the loop, that could explain the one image instead of what I guessed at previously. The theme’s street view functionality may be set up to only have one per page. The JS that puts the view in the container may be doing so for the first container found (based on the last post in the loop) and ignoring the others. If that’s the case, you’ll need to look at re-working the JS that inserts views.

Looks like the problem is with the JS. Everytime I change the thumbnail to something else i.e

echo "no thumbnail";

Im getting exactly what I want to get with the street view…
This is the JS code, can you help me with re-working that?

<div id="street-view" style="height:163px;"></div>
 <div id="street-view2" style="height:163px;"></div> // my modification
                <script>
                    /* Property Detail Page - Google Map for Property Location */

                    function initialize_property_map(){

                        var propertyMarkerInfo = <?php echo json_encode( $property_marker ); ?>

                        var url = propertyMarkerInfo.icon;
                        var size = new google.maps.Size( 42, 57 );

                        // retina
                        if( window.devicePixelRatio > 1.5 ) {
                            if ( propertyMarkerInfo.retinaIcon ) {
                                url = propertyMarkerInfo.retinaIcon;
                                size = new google.maps.Size( 83, 113 );
                            }
                        }

                        var image = {
                            url: url,
                            size: size,
                            scaledSize: new google.maps.Size( 42, 57 ),
                            origin: new google.maps.Point( 0, 0 ),
                            anchor: new google.maps.Point( 21, 56 )
                        };

                        var propertyLocation = new google.maps.LatLng( propertyMarkerInfo.lat, propertyMarkerInfo.lang );
                        var propertyMapOptions = {
                            position: propertyLocation,
                            pov: {
            heading: 34,
            pitch: 10
          }

                        };
                        var propertyMap = new google.maps.StreetViewPanorama(document.getElementById("street-view"), propertyMapOptions);
                        var propertyMap2 = new google.maps.StreetViewPanorama(document.getElementById("street-view2"), propertyMapOptions); //my modification

                    }

                    window.onload = initialize_property_map;
                </script>

What I tried to add to this code is commented on the right and this worked only showed two instances of street view in one post preview. Strange, why I can get two in one, but can’t get one in two separate posts?! Is this has something to do with dynamic callout of ID in <DIV>?? Thanks for any input.

Yes, I think you are correct about IDs. In your modification you created another map container with a different ID so two containers worked fine. On an archive page, each post’s map container has the same ID (resulting in invalid HTML as well), so each time the JS runs, it applies it’s view to the first container found.

The solution would require some significant reworking of the archive template’s loop code, as well as reworking the JS. The archive template’s loop needs to use some sort of counter. I think there’s a counter in the main query object, but it may be just as easy to create one. The current loop count is then concatenated to the map container’s ID so each container on the page has its own unique ID.

The JS should not be part of the loop’s output, it should occur only once. It too runs in a loop, but not the same as the template’s loop. The JS loop naturally has a counter already, use it to construct the ID of each map container on the page. This way the map content is initialized once for each container on the page.

That takes care of the container ID issue, but we also need to feed each iteration of the JS loop the requisite information needed for each map view. This is best done by constructing a JS data array in PHP. The JS loop can then pick the appropriate data out of the array on each loop iteration. The data array can be built initially as a PHP array as the main loop runs. When the main loop is finished, the data can be output inside a <script> block in proper JS array format.