Google Maps: Creating a Custom Street View Control

When I upgraded my imGoogleMaps JQuery Plugin, I had to create a custom control button on the Google Map. The Control allows the user to add a Street View Overlay to the map. To create the control, I had to assign a prototype object to the instance of the GControl object.

First I created a variable to hold my GStreetviewOverlay. This is important. I did not create this at first, so when a user clicked on the control, the Street View Overlay would be turned on, but could never be turned off. Because this is a global variable, I gave it a distinct name.

var imSVOverlay = null;

Then I created the Javascript object.

function imStreetViewControl() {}
//subclass the GControl Object
imStreetViewControl.prototype = new GControl();
//create and style my button
imStreetViewControl.prototype.initialize = function(imGMapObj) {
  var streetViewBtn = document.createElement("div"); = "none"; = "#000000"; = "white"; = "small Arial"; = "11px"; = "bold"; = "1px solid black"; = "2px"; = "3px"; = "center"; = "6em"; = "pointer";
  streetViewBtn.appendChild(document.createTextNode("Street view"));
  GEvent.addDomListener(streetViewBtn, "click", function() {
        //if imSVOverlay is null, add the overlay, 
        //else remove the overlay and set the variable back to null  
  	if (!imSVOverlay) {
		imSVOverlay = new GStreetviewOverlay();
	} else {
		imSVOverlay = null;
  return streetViewBtn;
// I want the button to appear on the top right next to the Map, Satellite,
// and Terrain control buttons. 210 pads the button 210 pixels from the right
imStreetViewControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 7));

Now I want to add the imStreetViewControl to the map.

if (GBrowserIsCompatible()) {
     map = new GMap2(document.getElementById('map'));
     map.addControl(new imStreetViewControl());

That’s it. The Street View Control will be added to your map. Enjoy

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks