CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Mark
Mark

Reputation: 488

Update google map from select dropdown menu

I need to be able to update a google map from a html select dropdown menu. Bit of a n00b so any info would be much appreciated. I have the following JS / Google map api v3 code to work with.

Using the select dropdown menu i will need to be able to update the map using the varibales, i.e select bromley_route638.setMap(map); from a dropdown menu. Thanks!

        <script>
    // Mapping variables
            var global_strokeColor = "#FF0000";
            var global_strokeOpacity = 1.0;
            var global_strokeWeight = 2;

            //BROMLEY BOROUGH
            var bromley_centrepoint = new google.maps.LatLng(51.408664,0.114405);

            var school_bromley_beaverwood = new google.maps.LatLng(51.41859298,0.089179345);
            var school_bromley_bishpjustus = new google.maps.LatLng(51.382522,0.045018);

            // Route 638
            var bromley_route638 = new google.maps.Polyline({
              path: [new google.maps.LatLng(51.408664,0.114405),new google.maps.LatLng(51.412973,0.114973),new google.maps.LatLng(51.417979,0.097195),new google.maps.LatLng(51.421214,0.023720)],
              strokeColor: global_strokeColor,
              strokeOpacity: global_strokeOpacity,
              strokeWeight: global_strokeWeight
            });

          function initialize() {
            var myLatLng = bromley_centrepoint;
            var myOptions = {
              zoom: 13,
              center: myLatLng,
              mapTypeId: google.maps.MapTypeId.TERRAIN
            };


           var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

           bromley_route638.setMap(map);

          }
        </script>
        </head>
        <body onload="initialize()">
          <div id="map_canvas"></div>
<div id="asd">
  <form style="float:left; ">
      <select name="mapchange">
        <option onclick="">school 1</option>
        <option onclick="">school 2</option>
    </select>
  </form>
</div>

        </body>
        </html>

EDIT:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Bus Routes</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

    function updateMap(selectControl)   {
        switch(selectControl.value)
        {
    case school1:
      var polyline = new google.maps.Polyline({
  path: [
  new google.maps.LatLng(51.408664,0.114405),
  new google.maps.LatLng(51.412973,0.114973),
  new google.maps.LatLng(51.417979,0.097195),
  new google.maps.LatLng(51.421214,0.023720)],
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2
});

      var latLng = new google.maps.LatLng(51.41859298,0.089179345)
      break;
    case school2:
      var polyline = new google.maps.Polyline({
  path: [
  new google.maps.LatLng(51.408664,0.114405),
  new google.maps.LatLng(51.412973,0.114973),
  new google.maps.LatLng(51.417979,0.097195),
  new google.maps.LatLng(51.421214,0.023720)],
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2

  });

      var latLng = new google.maps.LatLng(51.382522,0.045018)
      break;
    default:
      break;
    }
    initialize(polyline, latLng);
    }

    function initialize(polyline, schoolLatLng) {
        var myLatLng = schoolLatLng;
        var myOptions = {
          zoom: 13,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };


       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

       polyline.setMap(map);

      }

    //end

</script>

</head>

<body onload="initialize()">

<div id="map" style="width:600px; height:600px; display:block;">
    <div id="map_canvas" style="width:600px; height:600px;"></div>
</div>

<form style="float:left; ">
    <select name="mapchange">
        <option onchange="updateMap" value="school1">school 1</option>
        <option onchange="updateMap" value="school2">school 2</option>
    </select>
</form>

</body>



   </

html>

Upvotes: 0

Views: 14604

Answers (3)

GoG
GoG

Reputation: 310

ok. here is the entire code and it is working: try changing items in the drop dow list and the map will update .... ONLY ADD INITIAL VALUES for the case:

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Bus Routes</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

    function updateMap(selectControl)   {
    alert(selectControl);
        switch(selectControl)
        {
    case 'school1':
      var polyline = new google.maps.Polyline({
  path: [
  new google.maps.LatLng(51.408664,0.114405),
  new google.maps.LatLng(51.412973,0.114973),
  new google.maps.LatLng(51.417979,0.097195),
  new google.maps.LatLng(51.421214,0.023720)],
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2
});

      var latLng = new google.maps.LatLng(51.41859298,0.089179345)
      break;
    case 'school2':
      var polyline = new google.maps.Polyline({
  path: [
  new google.maps.LatLng(51.408664,0.114405),
  new google.maps.LatLng(51.412973,0.114973),
  new google.maps.LatLng(51.417979,0.097195),
  new google.maps.LatLng(51.421214,0.023720)],
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2

  });

      var latLng = new google.maps.LatLng(51.382522,0.045018)
      break;
    default:
      break;
    }
    initialize(polyline, latLng);
    }

    function initialize(polyline, schoolLatLng) {
        var myLatLng = schoolLatLng;
        var myOptions = {
          zoom: 13,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };


       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

       polyline.setMap(map);

      }

    //end

</script>

</head>

<body onload="initialize()">

<div id="map" style="width:600px; height:600px; display:block;">
    <div id="map_canvas" style="width:600px; height:600px;"></div>
</div>

<form style="float:left; ">
    <select name="mapchange" onchange="updateMap(this.options[this.selectedIndex].value)">
        <option  value="school1">school 1</option>
        <option  value="school2">school 2</option>
    </select>
</form>

</body>



   </html>

Upvotes: 2

GoG
GoG

Reputation: 310

So, based on yours description, what you can do is simply to add function with switch-case statement which will check for the name of the selected school. For each case, your polygon variable will get different value, and that value will be shown on the map. What am I saying is something like:

<select name="mapchange">
    <option onclick="updateMap">school 1</option>
    <option onclick="updateMap">school 2</option>
</select>

Modify the initialize function to receive input argument: initialize(var polyline)

In the updateMap() add the switch-case logic :

switch(dropdownvalue)

{ case school1: var polyline = new google.maps.polyline.... break; case school2: evar polyline = new google.maps.polyline.... break; default: break; }

After that, call the initialize(polyline) function . And at the very end of the function the line for adding the polyline will be:

polyline.setMap(map);

hope this helps...

Edit: OK Try this:

<select name="mapchange" onchange="updateMap(this.options[this.selectedIndex].value)>
<option value="school1">school 1</option>
<option value="school2">school 2</option>
</select>

The updateMap method:

function updateMap(selectControl)
{
switch(selectControlValue)
{

case 'school1':
  var polyline = new google.maps.polyline....
  var latLng = new google.maps.LatLng(the coordinates of the school)
  break;
case 'school2':
  var polyline = new google.maps.polyline....
  var latLng = new google.maps.LatLng(the coordinates of the school)
  break;
default:
  break;
}
initialize(polyline, latLng);
}

And, the initialize function will be:

function initialize(polyline, schoolLatLng) {
        var myLatLng = schoolLatLng;
        var myOptions = {
          zoom: 13,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };


       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

       polyline.setMap(map);

      }

This is the entire solution, you just need to update the data for the polylines of the routes to the schools, and tha coordinates of the schools.

Upvotes: 0

Marc Uberstein
Marc Uberstein

Reputation: 12541

I guess you want to reset the LatLng to a new value. What you can do is to set the LatLng values in your drop down in the value attribute. Set a event, onchange, on your select box to a javascript function.

In the function check the selected option and get the new selected LatLng. and then redirect (or ajax call) to same page with url variables or hidden input fields to set new LatLng in the GoogleMap code.

Upvotes: 0

Related Questions