Hi, we have been working on some address validations for our admin and for years, we have validated customers addresses over at Melissa data.
When you use their tool, you also get to see a satellite and street view from google maps, right on the page.
In working on my project, I began to think how nice it would be to have those maps right in our order view in the admin.

Looking closer at the google maps API, I found it's quite easy to implement and google is very generous with use of the API.
They do charge if you have a huge amount of usage, and they will require a debit/credit card entered when you request access to the API, there is really no way I can see that looking up these in your admin will send you over that free threshold. Maybe if you were viewing several thousand orders per hour in your admin.

To set this up, you need to request access to the maps API. There are three different ones, and you want to get all three. For some reason, you have to do them individually. Google will issue you three API keys, you only need to use one of them. Any of the three will give you the access you need for the scripts below.
https://cloud.google.com/maps-platform/ (Click "Get Started" and enable all three API's - MAPS - ROUTES - PLACES)
Google will issue you three API keys, you only need to use one of them.

Now that you have your own API key(s), you are ready to install.
This is for .asp only.
There is only one line of .asp there and I am sure it can easily be adapted for .php.
The line of .asp is to keep the javascript from running unless you are actually viewing an individual order details. Any other view, the code does not run.

This block of code is easy to install. It will go in the vsadmin/adminorders.asp file (or secretadmin/adminorders.asp if you have a secondary admin).
The nice thing here is this file is rarely changed when ect updates come out. Most of the ect code changes are in the /inc folder in the admin.
Also, this page we are editing, is a very small page. It has less than 100 lines in it, so it's easy to locate and install this code.

Speaking of code

Open the file in your editor (I like Notepad++) and at the bottom of the page, you will find


Right BEFORE that, insert the code below.
IMPORTANT You must insert your Google API key in the place I have indicated.




Save and upload and that's it.
You should have something like the following when viewing orders.

Additional info

Ok, you might ask - Why do I need it?
Well, for one, it's cool
But in real world use, it is helpful. It may help you see the customer is in an apartment complex and did not give you an apartment number.
It could help with fraud if the address looks vacant. (Although keep in mind the images may be old).
You can easily determine if the address is commercial or residential.
You can gain insight into your customers - are they mostly city or rural? is it mostly commercial or residential? This could help marketing efforts.
There are other reasons we find as well.

A few other things to note.
The script assumes your shipping address is populated in the admin. There is a parameter you can set in your includes, that if a customer does not enter a separate shipping address, then copy the billing over to the shipping.
This way, you always have data in the shipping fields in your admin.

There is some inline css there that sets the size of the maps. You can make adjustments to suit your needs. The maps MUST have a height and width set.
Can can't just use "auto".

This is for US addresses. I'm not sure how well it will respond to international addresses.
You addresses need to be somewhat clean - meaning formatted correctly.
Some characters or malformed addresses might cause no results to be returned.
Some street views will not come up - Google does nit send their camera cars to every corner of the US.
There are "alerts" that come up when an address is not found. We can turn those off if you like.
EDIT - I edited the code above and commented the alert out for street view and put a message that will show in place of the image there.
If you want the popup alert, just take out the two slashes there //

Google has many, many customization for their maps and there is a lot of documentation and sample code they have. Feel free to dive in.
If you want some change and your having trouble, I can try to help.

You may see that it looks like the code is requesting directions, and we had to request the API for directions as well. WHY?
Well, this is needed to get the street view to show the front of the locations. Without that, you might get some side street or the back of the home/business. (I wrestled a few hours with that during development)

Enjoy...

This is an awesome feature. Thanks David.

Here is the PHP version that I'm using.

::: PHP VERSION :::

<!-- begin Google Maps insert -->
<? if (@$_GET["id"]!="new" && request.querystring("id")!="" && request.querystring("id")!="multi" && request.querystring("invoice")!="true" && request.querystring("printer")!="true") {?>
<div style="margin-left:120px; height:600px; width:85%; float:left;" id="map"></div>
<div style="margin-left:120px; height:600px; width:85%; margin-top:20px;" id="pano"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY" ></script>
<script>
var lineone = document.getElementById('ordsaddress').innerHTML;
var shpcty = document.getElementById('ordscity').innerHTML;
var shpste = document.getElementById('ordsstate').innerHTML;
var shpzp = document.getElementById('ordszip').innerHTML;
mapaddress = (lineone + ' ' + shpcty + ' ' + shpste + ' ' + shpzp);
var sv = new google.maps.StreetViewService();
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
var panorama;
var address = mapaddress;
var myLatLng;
var map;

function initialize() {
panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myLatLng = results[0].geometry.location;

// find a Streetview location on the road
var request = {
origin: address,
destination: address,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, directionsCallback);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {

panorama.setPano(data.location.pano);

var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, myLatLng);
panorama.setPov({
heading: heading,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);

} else {
//alert("Street View data not found for this location.");
document.getElementById("pano").innerHTML = ("<strong>Street View data not found for this location.</strong>");
}
}
function directionsCallback(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var latlng = response.routes[0].legs[0].start_location;
sv.getPanoramaByLocation(latlng, 50, processSVData);
} else {
alert("Directions service not successfull for the following reason:" + status);
}
var mapOptions = {
zoom: 20,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
}
</script>
<? } ?>
<!-- end Google Maps insert -->