www.webdeveloper.com
Results 1 to 4 of 4

Thread: Using JS to selectively display 1 of 3 maps based on a dropdown menu

Hybrid View

  1. #1
    Join Date
    Aug 2013
    Location
    Dallas, TX
    Posts
    4

    Using JS to selectively display 1 of 3 maps based on a dropdown menu

    Hello all, first off I should say that I am only 3 months into learning any sort of development, so I'm about as green as they come. Also, first post

    Basically what I want is to be able to use a dropdown menu (3 choices of cities) to select and display a map of the selected city. I have the dropdown coded, and the links to an embedded google map of each city, I just have no idea how to display only one based on the dropdown selection.

    Here is the dropdown:

    Code:
    <script>
     function currCity() {
       var loc=document.getElementById("loc");
       document.getElementById("cit").value=loc.options[loc.selectedIndex].text;
     }
    </script>
    Code:
    <form id="cityselect" class="grid_6 omega">
     Select your location:
     <select id="loc" onchange="currCity()">
       <option></option>
       <option>Chicago</option>
       <option>Dallas</option>  
       <option>Minneapolis</option>
     </select>
    </form>
    Here are the 3 maps:

    Code:
    <!-- Chicago -->
     <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&amp;ll=41.803054,-87.894745&amp;spn=0.596816,1.344452&amp;t=m&amp;z=10&amp;output=embed"></iframe>
    <!-- Dallas -->
     <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&amp;ll=32.763027,-96.738739&amp;spn=0.673255,1.344452&amp;t=m&amp;z=10&amp;output=embed"></iframe>
    <!-- Minneapolis -->
     <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&amp;ll=44.93078,-93.148956&amp;spn=0.566809,1.344452&amp;t=m&amp;z=10&amp;output=embed"></iframe>
    Thanks!

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Maps</title>
    <script type="text/javascript">
    var maps=[
    ['Chicago','https://maps.google.com/?ie=UTF8&amp;ll=41.803054,-87.894745&amp;spn=0.596816,1.344452&amp;t=m&amp;z=10&amp;output=embed'],
    ['Dallas','https://maps.google.com/?ie=UTF8&amp;ll=32.763027,-96.738739&amp;spn=0.673255,1.344452&amp;t=m&amp;z=10&amp;output=embed'],
    ['Minneapolis','https://maps.google.com/?ie=UTF8&amp;ll=44.93078,-93.148956&amp;spn=0.566809,1.344452&amp;t=m&amp;z=10&amp;output=embed']
    ];
    function doc(id){return document.getElementById(id);}
    function showMap(n){
    doc('citymap').innerHTML='<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+maps[n][1]+'"></iframe>';
    doc('cityname').innerHTML='<h2>'+maps[n][0]+'</h2>';
    document.title=maps[n][0];
    }
    window.onload=function(){
    doc('loc').onchange=function(){
    this.blur();
    var val=new Number(this.options[this.selectedIndex].value) || false;
    if(val){showMap(val);}
    }
    }
    </script>
    </head>
    <body>
    <center>
    <select id="loc">
    <option>Select your location:</option>
    <option value="0">Chicago</option>
    <option value="1">Dallas</option>
    <option value="2">Minneapolis</option>
    </select>
    <br /><br /><br />
    <div id="cityname"></div>
    <br /><br /><br />
    <div id="citymap"></div>
    </center>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Aug 2013
    Location
    Dallas, TX
    Posts
    4
    Thank you so much!

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    you're welocme )
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles