Street View Map with Google Maps Using Text Address

Question

I have a google map on my wordpress single post page that grabs the address from 2 custom fields. It works fine, but now I'm trying to add a street view link/option.

I have on my page --

<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed/v1/place?q=<?php echo $add; ?>,%20<?php  $terms = wp_get_post_terms(get_the_ID(), 'city-type');
  if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
     foreach ( $terms as $term ) {
 if ($term->parent == 0) //check for parent terms only
       echo '' . $term->name . '';      
     }
  } ?>&zoom=17&key=mytoken"></iframe>

Which will then output something like this --

<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed/v1/place?q=100 las vegas ave,%20Las Vegas, NV&amp;zoom=17&amp;key=mytoken"></iframe>

Is there a way to add street view without using coordinates?

I tried getting the coordinates but they were slightly off --

<?php
 function getCoordinates($address){

$address = str_replace(" ", "+", $address); // replace all the white space with "+" sign to match with google search pattern

$url = "https://maps.google.com/maps/api/geocode/json?sensor=false&address=$address";

$response = file_get_contents($url);

$json = json_decode($response,TRUE); //generate array object from the response from the web

return ($json['results'][0]['geometry']['location']['lat'].",".$json['results'][0]['geometry']['location']['lng']);

}

$terms = wp_get_post_terms(get_the_ID(), 'city-type');
 if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
     foreach ( $terms as $term ) {
 if ($term->parent == 0) //check for parent terms only
      echo getCoordinates($add, $term->name, $property_pin);     
     }
  } else {
echo getCoordinates($add, $term->name, $property_pin);
}

?>

I'm already using geocode to try and get the coordinates before hand. For example the geocode gives me these coordinates -- 34.0229995,-118.4931421 but the coordinates I'm looking for is -- 34.050217,-118.259491

Chenault

Nope, sadly there still isn't a way to do this with geocoding first: https://mcmap.net/q/321461/-google-street-view-url?rq=1 – Colossian

what would be an alternative? – Chenault

Check the other question :-) if you want to have streetview, you need the lat/lng and you can get those with geocode. – Colossian

In my question I stated i tried using geocode, the coordinates were off by a fraction though. – Chenault

Answer 1

Ok, I figured it out.

I used the code from my question to get the coordinates of the address --

<?php

// FUNCTION TO CONVERT ADDRESSES INTO COORDINATES
function getCoordinates($address){

$address = str_replace(" ", "+", $address); // replace all the white space with "+" sign to match with google search pattern

$url = "https://maps.googleapis.com/maps/api/geocode/json?address=$address&key=YOUR_TOKEN_KEY";

$response = file_get_contents($url);

$json = json_decode($response,TRUE); //generate array object from the response from the web

return ($json['results'][0]['geometry']['location']['lat'].",".$json['results'][0]['geometry']['location']['lng']);
}

// THIS GETS MY TOP TERM FROM MY CUSTOM TAXONOMY I.E. NEW YORK, NY
$terms = wp_get_post_terms(get_the_ID(), 'city-type');
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
     foreach ( $terms as $term ) {
 if ($term->parent == 0) //check for parent terms only

// $ADD IS FROM MY CUSTOM FIELD FOR THE ADDRESS I.E. 1460 BROADWAY
     $the_address = getCoordinates($add, $term->name);    
     }
  }; ?>

Then I simply used the following google embed code (replace token key with your own) ---

<iframe width="100%" height="350" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/streetview?location=<?php echo $the_address; ?>&heading=165&pitch=0&key=YOUR-TOKEN-KEY" allowfullscreen></iframe>

That's for adding the street view map, I wanted both though so what I did was create two divs, one for each map and then just use click functions to show/hide them --

jQuery(document).ready(function(){
    $("#sv-link").click(function(){
        $("#rv-box").slideToggle("fast");
$("#sv-box").slideToggle();
});
$("#rv-link").click(function(){
        $("#sv-box").slideToggle("fast");
$("#rv-box").slideToggle();
});

});

I know it's probably not the best solution and I can probably dig deeper but this is all I needed. I did run into a issue with a couple addresses that had multiple images/perspectives for one location. I'm trying to figure that out, times square footlocker using the address 1460 broadway, is a perfect example.

Besides that it seems to work fine.

Google Maps

Chenault

Did this solve the accuracy problem as well? Glad that you solved it. :D – Colossian

The accuracy issue was due to me missing the city in my address. – Chenault