Display panoramio images on the map using GControl and GLayer objects

Today is a Google map api tutorial on using GControl and GLayer objects to display panoramio images on a map, yesterday I wrote a Google map api tutorial about adding a control button to a Map (Google map API Tutorial: adding a control button to a Map using a GControl object ), today, in conjunction with the previous article, I will write down how to add a panoramio image to the map. The main objects used are GControl and GLayer objects. Official GControl object documentation (Click here), official GLayer object documentation (Click here)

Create an image layer object using GLayer

We can use the following code to create a panoramio.com Image Layer:
PhotoLayer = new GLayer ("com. panoramio. all ")
Then add this layer through Gmap. addOverlay (photoLayer ).

Google map APIs support GLayer objects include Google webcam, panoramio, Wikipedia, etc. For more support, please click to view: http://spreadsheets.google.com/pub? Key = p9pdwsai2hDN-cAocTLhnag

Create a checkbox on the map using the GControl object

This method is not much said. For details about GControl, please refer to the GControl tutorial I wrote earlier (Google Map API Tutorial: add the control button on the Map using GControl objects ). Here we just paste the Code:

Function photoControl (){};
PhotoControl. prototype = new GControl ();
PhotoControl. prototype. initialize = function (gmap ){
Var buttonDiv = document. createElement ("div ");
ButtonDiv. id = "photoLayer ";
Var inputDiv = document. createElement ("input ");
InputDiv. type = "checkbox ";
InputDiv. id = "photoCheckBox"
InputDiv. onclick = function (){
AddPhotoLayer (this. checked)
}
ButtonDiv. appendChild (inputDiv );
Var labelFor = document. createElement ("label ");
LabelFor. setAttribute ("for", "photoCheckBox ");
LabelFor. appendChild (document. createTextNode ("see Figure "));
ButtonDiv. appendChild (labelFor );
Gmap. getContainer (). appendChild (buttonDiv );
Return buttonDiv;
};

PhotoControl. prototype. getDefaultPosition = function (){
Return new GControlPosition (G_ANCHOR_TOP_LEFT, new GSize (530, 7 ));
};

Final code and instance var gmap = null, photoLayer = new GLayer ("com. panoramio. all ");

Function init (){
If (GBrowserIsCompatible ()){
Gmap = new GMap2 (document. getElementById ("gmap "));
Gmap. setCenter (new GLatLng (36.105, 120.34), 12 );
Gmap. setUI (gmap. getdefaui UI ());
Gmap. enableScrollWheelZoom ();

Gmap. addControl (new photoControl ());
}
}
Function photoControl (){};
PhotoControl. prototype = new GControl ();
PhotoControl. prototype. initialize = function (gmap ){
Var buttonDiv = document. createElement ("div ");
ButtonDiv. id = "photoLayer ";
Var inputDiv = document. createElement ("input ");
InputDiv. type = "checkbox ";
InputDiv. id = "photoCheckBox"
InputDiv. onclick = function (){
AddPhotoLayer (this. checked)
}
ButtonDiv. appendChild (inputDiv );
Var labelFor = document. createElement ("label ");
LabelFor. setAttribute ("for", "photoCheckBox ");
LabelFor. appendChild (document. createTextNode ("see Figure "));
ButtonDiv. appendChild (labelFor );
Gmap. getContainer (). appendChild (buttonDiv );
Return buttonDiv;
};

PhotoControl. prototype. getDefaultPosition = function (){
Return new GControlPosition (G_ANCHOR_TOP_LEFT, new GSize (530, 7 ));
};
Function addPhotoLayer (checked ){
If (checked ){
Gmap. addOverlay (photoLayer );
}
Else {
Gmap. removeOverlay (photoLayer );
}
} Source: http://www.js8.in/566.html