Click here to Skip to main content
Click here to Skip to main content

Google Maps StreetView

, 15 Oct 2010
Rate this:
Please Sign up or sign in to vote.
A user friendly way of using the Google Maps streetview
Sample Image

Introduction

Most Internet applications now use Google Maps. Google has provided a very rich API to use in our own applications. For the Google Maps, the latest feature is the "Panoroma view". Using it, I have created this Google Maps example. In this example, when the Google StreetView Man google Sreetview is dragged, the streets are highlighted wherever street view is enabled by Google. When it is dropped, the normal map is displayed. This way, the maps will be more little user friendly. This example uses JavaScript to call the Google Maps API.

Using the Code

In this part of the article, I will describe how to load Google Maps into an HTML page. Within the head section of an HTML document, include this script reference to the Google Maps API; the key should be changed if you need to upload this HTML in to a web server.

<script 
  src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false" 
  type="text/javascript"></script>

Within the same HTML section, add the JavaScript function below. This function calls a Google map and displays it in a <div id="map_canvas"....

<script type="text/javascript">
  var marker = null;
  var myPano = null;


function initialize() {
  if (GBrowserIsCompatible()) {
       map = new GMap2(document.getElementById("map_canvas"));
       map.setCenter(new GLatLng(37.4419, -122.1419), 13);
       map.setUIToDefault();
  }
}
</script>

The HTML document should have <div id="map_canvas"... and from the body onload, the initialize() method should be called. Here is the full listing of code for loading a Google map into an HTML document.

<html>
<head>
<script 
  src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false" 
  type="text/javascript"></script>
<script type="text/javascript">
    function initialize() {
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(37.4419, -122.1419), 13);
            map.setUIToDefault();
          }
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>

From this point, I will describe how to add panorama view to the above Google map. To add panorama view, we need to add another <div id="stview"... to the HTML document, and the JavaScript should be change accordingly.

Adding a div tag into the HTML body section:

<div id="stview" style="width: 500px; height: 200px"></div>

The next step is to create a draggable marker on the map. The code for creating and adding a Google maker is listed here:

var latlang = map.getCenter(); 
var icon = new GIcon();

var imageUrl = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-0.png";

icon.image = imageUrl;
icon.iconSize = new GSize(49,52);
icon.iconAnchor =  new GPoint(25,36);
icon.infoWindowAnchor = new GPoint(25,6); 

marker = new GMarker(latlang, {"icon":icon, "draggable":true});
map.addOverlay(marker);

After adding a marker in to the map, the map should have listener events to listen when drag, drop events occur. To do this with Google maps, we should call the GEvent.addListener() method. The code for handling drag and drop events is listed below. The GStreetviewOverlay object should be defined before calling the addListener() event.

var streetOverlay = new GStreetviewOverlay();

GEvent.addListener(marker, "dragstart", function()
{
    map.addOverlay(streetOverlay);
}
); 
    
GEvent.addListener(marker, "dragend", function(overlay,latlang)
{            
    map.removeOverlay(streetOverlay);
    openWindow();
}
);

Finally, the panorama view should be opened. I wrote a separate method to do this. The openWindow() method is called when a drop event occurs.

function openWindow()
{
  myPano = new GStreetviewPanorama(document.getElementById("stview"));
  var latlang = marker.getLatLng();
  myPano.setLocationAndPOV(latlang);
}

Done. For complete code listings, please download the demo project.

Points of Interest

The variables marker and myPono should be global variables.

<script type="text/javascript">
var marker = null;
var myPano = null;

function initialize() {
    if (GBrowserIsCompatible()) {
        ................
        ................

History

  • 17th May, 2009: Initial post
  • 14th October, 2010: Updated demo

This is my first article on CodeProject.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Rukshan Samanthilaka
Software Developer
Sri Lanka Sri Lanka
I came to the the software industry in 2006 now i am familiar with C#, ASP.NET, SQL Server, JavaScript,Google Maps and Virtual Earth API and looking forward for a long way ahead.

Comments and Discussions

 
QuestionHow do I attach the icon to the zoom slider? Pinmemberhneel13-Oct-10 11:15 
AnswerRe: How do I attach the icon to the zoom slider? PinmemberRukshan Samanthilaka14-Oct-10 7:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140718.1 | Last Updated 15 Oct 2010
Article Copyright 2009 by Rukshan Samanthilaka
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid