Dec24
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"); 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
Thanks, saved me a lot of time!
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
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).
If you can tell me how I can remove. We use javascript / jquery very often. Thnx in common
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
Thanks for sharing and making things easy to understand.
one thing that has me stumped though, on many of your map demos the zoom level is maxed. How can it be changed to a value like 14-15?
Thanks again,
Terry
Terry,
Sorry for the late reply. The plugin has a zoom_level option. The default value for the zoom_level is 1.