Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Thanked 0 Times in 0 Posts

    To Link dynamic dropdown to a sidebar

    Hi I am planning to build a citysearch site ( http://www.erodemappy.com/ )for my place. I am new to programming . I need to replace the buttons in this site http://econym.org.uk/gmap/example_map11a.htm to dynamic dropdowns as shown in this site http://www.dreamwebstore.com/dws/jav...opdownlist.asp Could someone help me to get this….

  • #2
    New to the CF scene
    Join Date
    Jan 2009
    Thanked 0 Times in 0 Posts

    Let me be elaborate on my requirement.

    Let me be elaborate on my requirement.
    Please take a look at http://econym.org.uk/gmap/example_map11a.htm . Here when u click the buttons the corresponding sidebar entries are displayed. Please find the logic of this example in the page http://econym.org.uk/gmap/basic11.htm .
    1.When the button A is clicked, the value of the button A is passed to the readMap function ( view source for the codes) .
    <form action="#">

    <input type="button" value="A" onclick='readMap("a")' />

    <input type="button" value="B" onclick='readMap("b")' />

    <input type="button" value="C" onclick='readMap("c")' />


    2. The readmap function then executes the php file based on the value of the button and gets the corresponding sidebar entries from the php file and displays them.Actually readmap function also gets the markers longitude and latitude information from the map11.php file and displays them on the map but we need not concentrate on it .
    // A function to read the data
    function readMap(url) {

    var url="map11.php?q="+url;
    var request = GXmlHttp.create();
    request.open("GET", url, true);

    request.onreadystatechange = function() {

    if (request.readyState == 4) {
    var xmlDoc = request.responseXML;
    // obtain the array of markers and loop through it
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");

    // hide the info window, otherwise it still stays open where the removed marker used to be


    // empty the array
    gmarkers = [];

    // reset the side_bar

    for (var i = 0; i < markers.length; i++) {

    // obtain the attribues of each marker
    var lat = parseFloat(markers[i].getAttribute("lat"));
    var lng = parseFloat(markers[i].getAttribute("lng"));
    var point = new GLatLng(lat,lng);

    var html = markers[i].getAttribute("html");
    var label = markers[i].getAttribute("label");
    // create the marker
    var marker = createMarker(point,label,html);

    // put the assembled side_bar_html contents into the side_bar div
    document.getElementById("side_bar").innerHTML = side_bar_html;


    // When initially loaded, use the data from "map11.php?q=a"

    3.What i want to do is to replace the buttons to dynamic dropdowns. I need the readmap function to get the value of the second dropdowns onclicking it and display the corresponding sidebar entries from the php file. I have browsed and found some dropdrowns on net.Please find them below.

    a. http://www.javascriptkit.com/javatut...content2.shtml
    b. http://www.dreamwebstore.com/dws/jav...opdownlist.asp
    c. http://www.bitrepository.com/web-pro...1#comment-1505

    4.I would have many entries on the php file. Will this degrade the speed of my application. In that case pls let me know what can be the other solution.

    I have also tried to make the readmap function to get the value of the second dropdowns onclicking it in the www.erodemappy.com and display the corresponding sidebar entries from the php file but its not working . since i am new to programming i believe there is some mistake in my syntax. Could you help me to get this done..
    <form name="classic" >

    <select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">

    <option selected>Select A City</option>
    <option value="usa">USA</option>

    <option value="canada">Canada</option>
    <option value="uk">United Kingdom</option>


    <select name="cities" size="4" style="width: 150px" onClick='readMap(this.options[this.options.selectedIndex].value)'>

    Last edited by ilakkia; 01-20-2009 at 07:21 AM.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts