Street View Map with Google Maps Using Text Address

问题

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

回答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

回答2:

If you get the coordinates, you'll have an accurate location. Browsers these days can ask for permissions, and mobile devices come with GPS. using addresses isn't as precise.

What is the usability argument against simply asking for the data, if you get the users' consent first?

来源：https://stackoverflow.com/questions/47187171/street-view-map-with-google-maps-using-text-address

标签

javascript

php

wordpress

google-maps

google-street-view