Altering the location display on an HTML5 map through user selection from a dropdown menu

Question

Altering the location display on an HTML5 map through user selection from a dropdown menu

I'm currently working on a school project that involves coding. I've successfully implemented geolocation code to display the user's location upon page load. Now, I need to add a drop-down box that allows users to select from three additional locations - Walt Disney World, Honolulu, and Paris. To achieve this, I believe I need to use if statements in conjunction with Google Maps API for each location to change the map image displayed based on the selection made by the user. Below is a snippet of my current code:

CSS

html{ 
    height: 90% 
}
body{ 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
}
#map_canvas{ 
    height: 90%; 
    width: 90%; 
}

JS

var watchID;
var geo; // for the geolocation object
var map; // for the google map object
var mapMarker; // the google map marker object

// position options
var MAXIMUM_AGE = 200; // miliseconds
var TIMEOUT = 300000;
var HIGHACCURACY = true;

function getGeoLocation() {
    try {
        if (!!navigator.geolocation) return navigator.geolocation;
        else return undefined;
    } catch (e) {
        return undefined;
    }
}

// More JavaScript functions...

window.onload = function() {
    if ((geo = getGeoLocation())) {
        startWatching();
    } else {
        alert('Geolocation not supported.')
    }
}

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<div id="map_canvas"></div>
<section>
  <div id="vacationLocations">
    <h2>Vacation Locations</h2>
    <form name="tripSelection" method="post" method="get">
      <div class="formRow">
        <label for="serviceSelection">
          Trip Selection</label>
        <select name="tripSelection" id="tripSelection" class="validated" required>
          <option value="">-Select One-</option>
          <option value="1">Paris, France</option>
          <option value="2">Honolulu, Hawaii</option>
          <option value="3">Walt Disney World, Florida</option>
        </select>
      </div>
  </div>

This is what I have already in the program and it is working. Here is the code I have for Disney followed by the coordinates I have found for the other locations:

<!DOCTYPE html>
<html>
<head>
  <script
     src="http://maps.googleapis.com/maps/api/js">
  </script>

  <script>
  function initialize() {
      var mapProp = {
center:new google.maps.LatLng(28.3341439,-81.5871676),
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

Coordinates: - Paris, France: 48.8589507,2.2775174 - Honolulu, Hawaii: 21.3282956,-157.9390673

Any assistance on how to implement changing the map based on the selected location would be highly appreciated.

javascript css html google-maps geolocation

Answer 1

Answer №1

I successfully programmed a solution that met my requirements. Here is the code:

<!DOCTYPE html>
<html class lang="en">

<!-- 
  geoLocMap.html by Bill Weinman 
  <http://bw.org/contact/>
  created 2011-07-07
  updated 2011-07-20

  Copyright (c) 2011 The BearHeart Group, LLC
  This file may be used for personal educational purposes as needed. 
  Use for other purposes is granted provided that this notice is
  retained and any changes made are clearly indicated as such. 
-->

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
    html { height: 90% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 90%; width: 90% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
    var watchID;
    var geo;    // for the geolocation object
    var map;    // for the google map object
    var mapMarker;  // the google map marker object

    // position options
    var MAXIMUM_AGE = 200; // miliseconds
    var TIMEOUT = 300000;
    var HIGHACCURACY = true;

    function getGeoLocation() {
        try {
            if( !! navigator.geolocation ) return navigator.geolocation;
            else return undefined;
        } catch(e) {
            return undefined;
        }
    }

    function show_map(position) {
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        var latlng = new google.maps.LatLng(lat, lon);

        if(map) {
            map.panTo(latlng);
            mapMarker.setPosition(latlng);
        } else {
            var myOptions = {
                zoom: 18,
                center: latlng,

                // mapTypeID --
                // ROADMAP displays the default road map view
                // SATELLITE displays Google Earth satellite images
                // HYBRID displays a mixture of normal and satellite views
                // TERRAIN displays a physical map based on terrain information.
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            map.setTilt(0); // turns off the annoying default 45-deg view

            mapMarker = new google.maps.Marker({
                position: latlng,
                title:"You are here."
            });
            mapMarker.setMap(map);
        }
    }

    function geo_error(error) {
        stopWatching();
        switch(error.code) {
            case error.TIMEOUT:
                alert('Geolocation Timeout');
                break;
            case error.POSITION_UNAVAILABLE:
                alert('Geolocation Position unavailable');
                break;
            case error.PERMISSION_DENIED:
                alert('Geolocation Permission denied');
                break;
            default:
                alert('Geolocation returned an unknown error code: ' + error.code);
        }
    }

    function stopWatching() {
        if(watchID) geo.clearWatch(watchID);
        watchID = null;
    }

    function startWatching() {
        watchID = geo.watchPosition(show_map, geo_error, {
            enableHighAccuracy: HIGHACCURACY,
            maximumAge: MAXIMUM_AGE,
            timeout: TIMEOUT
        });
    }

    window.onload = function() {
        if((geo = getGeoLocation())) {
            startWatching();
        } else {
            alert('Geolocation not supported.')
        }
    }
</script>
<!--Changes added by Eric Wood  -->
<script>
    function tripChange() {
        var s = document.getElementById("tripSelection");
        var tripSelection = s.options[s.selectedIndex].value;

        if (tripSelection == 1) {
            value1();
        }else if(tripSelection == 2){
            value2();
        }else if(tripSelection == 3){
            value3();
        }
    }
            function value1() {
                var mapProp = {
                    center:new google.maps.LatLng(48.8589507,2.2775174),
                    zoom:14,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                };
                var Map=new google.maps.Map(document.getElementById("map_canvas"), mapProp);
            }

            function value2() {
                var mapProp = {
                    center:new google.maps.LatLng(21.3282956,-157.9390673),
                    zoom:14,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                };
                var Map=new google.maps.Map(document.getElementById("map_canvas"), mapProp);
            }

            function value3() {
                var mapProp = {
                    center:new google.maps.LatLng(28.3341439,-81.5871676),
                    zoom:14,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                };
                var Map=new google.maps.Map(document.getElementById("map_canvas"), mapProp);
            }
</script>
</head>
<body>
      <div id="map_canvas"></div>
    <section>
    <div id="vacationLocations" >
        <h2>Vacation Locations</h2>
    <form name="tripSelection" method="post" method="get" >
        <div class="formRow">
            <label for="serviceSelection">
             Trip Selection</label>
            <select name="tripSelection" id="tripSelection" class="validated" onchange="tripChange()" required>
                <option value="">-Select One-</option>
                <option value="1">Paris, France</option>
                <option value="2">Honolulu, Hawaii</option>
                <option value="3">Walt Disney World, Florida</option>
            </select>
        </div>
</div>
</body>
</html>

Answer 2

I successfully programmed a solution that met my requirements. Here is the code:

<!DOCTYPE html>
<html class lang="en">

<!-- 
  geoLocMap.html by Bill Weinman 
  <http://bw.org/contact/>
  created 2011-07-07
  updated 2011-07-20

  Copyright (c) 2011 The BearHeart Group, LLC
  This file may be used for personal educational purposes as needed. 
  Use for other purposes is granted provided that this notice is
  retained and any changes made are clearly indicated as such. 
-->

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
    html { height: 90% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 90%; width: 90% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
    var watchID;
    var geo;    // for the geolocation object
    var map;    // for the google map object
    var mapMarker;  // the google map marker object

    // position options
    var MAXIMUM_AGE = 200; // miliseconds
    var TIMEOUT = 300000;
    var HIGHACCURACY = true;

    function getGeoLocation() {
        try {
            if( !! navigator.geolocation ) return navigator.geolocation;
            else return undefined;
        } catch(e) {
            return undefined;
        }
    }

    function show_map(position) {
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        var latlng = new google.maps.LatLng(lat, lon);

        if(map) {
            map.panTo(latlng);
            mapMarker.setPosition(latlng);
        } else {
            var myOptions = {
                zoom: 18,
                center: latlng,

                // mapTypeID --
                // ROADMAP displays the default road map view
                // SATELLITE displays Google Earth satellite images
                // HYBRID displays a mixture of normal and satellite views
                // TERRAIN displays a physical map based on terrain information.
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            map.setTilt(0); // turns off the annoying default 45-deg view

            mapMarker = new google.maps.Marker({
                position: latlng,
                title:"You are here."
            });
            mapMarker.setMap(map);
        }
    }

    function geo_error(error) {
        stopWatching();
        switch(error.code) {
            case error.TIMEOUT:
                alert('Geolocation Timeout');
                break;
            case error.POSITION_UNAVAILABLE:
                alert('Geolocation Position unavailable');
                break;
            case error.PERMISSION_DENIED:
                alert('Geolocation Permission denied');
                break;
            default:
                alert('Geolocation returned an unknown error code: ' + error.code);
        }
    }

    function stopWatching() {
        if(watchID) geo.clearWatch(watchID);
        watchID = null;
    }

    function startWatching() {
        watchID = geo.watchPosition(show_map, geo_error, {
            enableHighAccuracy: HIGHACCURACY,
            maximumAge: MAXIMUM_AGE,
            timeout: TIMEOUT
        });
    }

    window.onload = function() {
        if((geo = getGeoLocation())) {
            startWatching();
        } else {
            alert('Geolocation not supported.')
        }
    }
</script>
<!--Changes added by Eric Wood  -->
<script>
    function tripChange() {
        var s = document.getElementById("tripSelection");
        var tripSelection = s.options[s.selectedIndex].value;

        if (tripSelection == 1) {
            value1();
        }else if(tripSelection == 2){
            value2();
        }else if(tripSelection == 3){
            value3();
        }
    }
            function value1() {
                var mapProp = {
                    center:new google.maps.LatLng(48.8589507,2.2775174),
                    zoom:14,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                };
                var Map=new google.maps.Map(document.getElementById("map_canvas"), mapProp);
            }

            function value2() {
                var mapProp = {
                    center:new google.maps.LatLng(21.3282956,-157.9390673),
                    zoom:14,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                };
                var Map=new google.maps.Map(document.getElementById("map_canvas"), mapProp);
            }

            function value3() {
                var mapProp = {
                    center:new google.maps.LatLng(28.3341439,-81.5871676),
                    zoom:14,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                };
                var Map=new google.maps.Map(document.getElementById("map_canvas"), mapProp);
            }
</script>
</head>
<body>
      <div id="map_canvas"></div>
    <section>
    <div id="vacationLocations" >
        <h2>Vacation Locations</h2>
    <form name="tripSelection" method="post" method="get" >
        <div class="formRow">
            <label for="serviceSelection">
             Trip Selection</label>
            <select name="tripSelection" id="tripSelection" class="validated" onchange="tripChange()" required>
                <option value="">-Select One-</option>
                <option value="1">Paris, France</option>
                <option value="2">Honolulu, Hawaii</option>
                <option value="3">Walt Disney World, Florida</option>
            </select>
        </div>
</div>
</body>
</html>

Altering the location display on an HTML5 map through user selection from a dropdown menu

Answer №1

Similar questions

What is the best method to initiate a page refresh from a different page without redirecting?

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

Configuring the TradingView widget with NextJS Script

Create a 2x2 HTML table where the first row remains undivided

Instructions for calculating the product of two text fields and showing the result in a separate text field without hitting submit in Rails (using jQuery or JavaScript)

Is it necessary to alert when there is a collision between a TypeScript type and a constant with the same name in a

Reasons for aligning inline elements with input boxes

JQuery Form Wizard - Adding a Finish Button Linked to a Page

Using React to open a (.json) file through a dialog box and access the contents

Troubles with modal functionality in Ionic application involving ion-slide-box

Tips for minimizing deep nesting of asynchronous functions in Node.js

Resetting Tabs in Child Component using React

Splitting a td tag into multiple columns dynamically with Angular

What is causing the scrollbars to appear only in IE on this layout?

Generating interactive elements in VUE is key

Explore relevant Pill information dynamically based on the image that was clicked in Angular

Issue with triggering e.preventDefault() on multiple dynamic forms

Angular encountered a 405 error when trying to execute a GET request due to the method

Incorporating Local Storage into a To-Do List Application

What is the process of resetting dropdown option values?