Advanced Custom Fields Street View in Google Map

February 5th, 2014 - Posted by Steve Marks to Javascript / jQuery, PHP, Software, Web Development.

One of the field types available with the Advanced Custom Fields plugin for WordPress is ‘Google Map‘. This allows a user to enter a location or address, then have a Google Map be output on the frontend.

I worked on a site this morning that required a Google map adding, the difference being that they wanted it in street view instead of the ordinary top down view. There was absolutely no reference on the web about how to do this, so I set out to modify the existing functionality in order to achieve this.

Back End Changes

You’ll be glad to hear that there are no changes required to the back end in WordPress to get this to work.

Simply set up a standard custom field of Google Map

ACF Google Map
… and use it like normal when setting it up on a post.

Using ACF Google Map

Front End Changes

Fortunately, the changes required are very minimal compared to the normal Google Map. The Advanced Custom Fields documentation contains the code to set this up normally.

For the HTML we do exactly the same code outlined in the documentation:

<?php 
 
$location = get_field('location');
 
if( ! empty($location) ):
?>
<div class="acf-map">
	<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>

Then the JavaScript, again, the code is pretty much exactly the same. I won’t copy all of the JavaScript here because there is quite a lot of it. The key function that we are going to change is render_map().

The original code from the documentation looks like so:

function render_map( $el ) {
    
    // vars
    var $markers = $el.find('.marker');
    var args = {
        zoom		: 16,
        center		: new google.maps.LatLng(0, 0),
        mapTypeId	: google.maps.MapTypeId.ROADMAP
    };
 
    // create map	        	
    var map = new google.maps.Map( $el[0], args);
 
    // add a markers reference
    map.markers = [];
 
    // add markers
    $markers.each(function(){
        add_marker( $(this), map );
    });
 
    // center map
    center_map( map );
}

To turn this into a street view map, we are going to add just a few lines of code to the end of the above function so that it now looks like so:

function render_map( $el ) {
    
    // vars
    var $markers = $el.find('.marker');
    var args = {
        zoom		: 16,
        center		: new google.maps.LatLng(0, 0),
        mapTypeId	: google.maps.MapTypeId.ROADMAP
    };
 
    // create map	        	
    var map = new google.maps.Map( $el[0], args);
 
    // add a markers reference
    map.markers = [];
 
    // add markers
    $markers.each(function(){
        add_marker( $(this), map );
    });
 
    // center map
    center_map( map );
    
    // Turn it into a street view map
    var streetViewOptions = {
        position: map.getCenter(),
        pov: {
            heading: 90,
            pitch: 0,
            zoom: 0
        }
    };
    var streetView = new google.maps.StreetViewPanorama($el[0], streetViewOptions);
    streetView.setVisible(true);
}

So there we have. By adding these few lines we can turn the standard map functionality from the ACF plugin into a street view.

ACF Street View
The only issue I’ve found is that, using this method, there is no way to set the default heading direction. In the code above we hard code this to 90 degrees as there is no way to specify this through the custom field.

If you wanted to specify the heading, or event the pitch and zoom, you’d probably have to extend the ACF plugin and build your own custom field type. The above is fine for me though at this time.

This entry was posted on Wednesday, February 5th, 2014 at 12:01 pm by +Steve Marks and is filed under Javascript / jQuery, PHP, Software, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first