Google Maps: Creating a Custom Street View Control
Thursday, December 24th, 2009When 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"); streetViewBtn.style.textDecoration = "none"; streetViewBtn.style.color = "#000000"; streetViewBtn.style.backgroundColor = "white"; streetViewBtn.style.font = "small Arial"; streetViewBtn.style.fontSize = "11px"; streetViewBtn.style.fontWeight = "bold"; streetViewBtn.style.border = "1px solid black"; streetViewBtn.style.padding = "2px"; streetViewBtn.style.marginBottom = "3px"; streetViewBtn.style.textAlign = "center"; streetViewBtn.style.width = "6em"; streetViewBtn.style.cursor = "pointer"; //container.appendChild(streetViewBtn); 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(); imGMapObj.addOverlay(imSVOverlay); } else { imGMapObj.removeOverlay(imSVOverlay); imSVOverlay = null; } }); imGMapObj.getContainer().appendChild(streetViewBtn); 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.setUIToDefault(); map.addControl(new imStreetViewControl()); } |
That’s it. The Street View Control will be added to your map. Enjoy
To create...
January 4th, 2010 at 8:06 am
Thanks, saved me a lot of time!
June 1st, 2010 at 3:10 am
Dear,
Thnx for the great plugin. I have one question though:
We don’t want to add the Streetview overlay at all….(the blue streets outline). When clicking on the streetview button right in the top corner, we want to go directly to the streetview panorama off the marker. So the button street view in the infoWindow, need to be on the right top corner.
How can we implement this?
Your sincerely,
Marten
June 9th, 2010 at 3:26 pm
If you know Javascript, I can tell you how to remove the blue street outline. If not, I am working on a new version, I can separate the blue lines from the street view option (and create an additional option to view the blue lines).
June 10th, 2010 at 1:36 am
If you can tell me how I can remove. We use javascript / jquery very often. Thnx in common
July 14th, 2010 at 2:22 am
Dear,
do you already finished the new version? Or can you tell me how I can separate the blue lines from the street view?
Your sincerely,
Marten