« Google Maps | Home | Google Maps, User Training? »
Inserting an Overlay on a Google Map
By klard | August 8, 2006
I am not going to try and take credit for code snippits I didn’t write from scratch….therefore I got this code from the google maps group and it was posted by evilc here.
Pretty much all I did was modify it to fit my needs as with most everything I tend to do. Anyway the code is:
//this code is inserted right after declaring the map using something like
//"map = new GMap(document.getElementById("div_map"));"
var tip = document.createElement("div");
tip.setAttribute("id","div_loading");
document.getElementById("div_map").appendChild(tip);
var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize((map.getSize().width/3.5),map.getSize().height/12)); //I need to look at this further..it anchors the overlay at the bootom left and then moves it to bottom center
pos.apply(document.getElementById("div_loading"));
tip.style.visibility="hidden";
messages = new Array();
Ok, so we have initialized our new div…..now we need to add some code for the messages. I struggled a little to figure out where to place the next block simply because the functon has to be included in the function that draws the markers on the map. I am no java programmer so I bet you could include it globally but this seems to work.
// Once again...I added this function inside the function that adds the markers to the map
function loadingPane(channel,message){
messages[channel]=message;
if (!messages['init']){
messages['init']='';
}
var tmpstr = '';
if (message['init'] !=''){
tmpstr += messages['init'];
}
document.getElementById("div_loading").innerHTML = ''+tmpstr+'';
if (messages['init'] !=''){
document.getElementById("div_loading").style.visibility="visible";
} else {
document.getElementById("div_loading").style.visibility="hidden"; }
}
Now it is pretty much just an exercise in calling the function loadingPane whenever we want the overlay to appear and clearing it when we want it to go away. Because of my design I want the loadingPane to show up when there are more than 100 markers and for it to go away and have the markers appear when there are fewer than 100 markers. Here is how I did that.
loadingPane('init',''); //clears the pane
} else {
loadingPane('init','Please Zoom In To View Properties
Use either the zoom +/- buttons at top left
Or double left click the area you want to zoom on.'); //adds it when I want to see it
}
If you want to see exactly how this is laid out you can view the source here Florida Rental Properties
Topics: Google Maps Mashup, Web Design |