Custom drop down menus

1,511 views
Skip to first unread message

teddy

unread,
Jan 17, 2011, 10:04:06 AM1/17/11
to Google Maps JavaScript API v3
Hi,

I want to create a custom drop down menu for the new V3 API.
Basically, the menu items will be links to kml that will be displayed
whenever the menuitem is chosen.
The thing is I can't figure out how to do a custom drop down menu.
Is there an example out there you can point me to?

Thanks.

chief

unread,
Jan 31, 2011, 5:18:47 PM1/31/11
to Google Maps JavaScript API v3
Teddy,

I figured this one out. Take a look at the following example code:

http://code.google.com/apis/maps/documentation/javascript/examples/control-custom.html

In that code look at this snippet:

// Set CSS for the control interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home</b>';
controlUI.appendChild(controlText);

// Setup the click event listeners: simply set the map to
// Chicago
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(chicago)
});

You can do whatever HTML you'd like in the:

controlText.innerHTML = '<b>Home</b>';

Here's what I did:

controlText.innerHTML = '<form name="detail_form"><select
name="detail_level"
onchange="loadKML(document.detail_form.detail_level.options[document.detail_form.detail_level.selectedIndex].value)">'+
'<option value="0">0</option>'+
'<option value="1">1</option>'+
'<option value="2">2</option>'+
'<option value="3">3</option>'+
'<option value="4">4</option>'+
'</select></form>';

You'll note that I have an onchange listener in there that uses a
loadKML function I defined. That will be the listener for this form,
you'll need to remove this map event listener below that snippet:

google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(chicago)
});

Hope that helps!

-chief


On Jan 17, 9:04 am, teddy <teddyb...@gmail.com> wrote:
> Hi,
>
> I want to create acustomdropdownmenu for the new V3 API.
Reply all
Reply to author
Forward
0 new messages