Search code examples
phpjavascriptgoogle-maps-api-2

Using PHP variable in JavaScript for Google Maps V2


i am currently on a Google Map Version 2 (sorry using the old version and please do not suggest me to use V3 instead because this is our requirement). Basically, this page should allow the user to add a place and select the type of that place (e.g. restaurant, bar, school, etc.). These information will be added in the database and will be used for toggling. Adding the place is working now and requires to be redirected to another php page (testmap.php) so that it will display the markers in the map. But toggling needs the information from the type selected in a dropdown list. My problem is that I do not know how to "associate" the type with each marker. I do not know how to transfer the data from the "type" dropdown list.

P.S.

  1. The fourth to the last line is the code where the address data is transferred in my addNewMarker function onSubmit.

  2. The PHP code above it is the dropdown list which contains the possible values of the "types" as explained above.

  3. To conclude, I need actual codes on how to get the marker type from the dropdownlist and be transferred together with the addNewMarker function so that testmap.php can use the values in the database and can be easily toggled.

Thank you so much for those who will help me!

 <script type="text/javascript">

            if(GBrowserIsCompatible()) {
                map_compatible = true;
            }

            /* Initialize the map this will be called when the document is loaded from: <body onLoad="initialize_map();"> */

            function initialize_map() {
                if( map_compatible ) {
                }       

            function addNewMarker(newAddress){
                var set;
                var lat;
                var longi;
                if(set==null){
                    set=1;
                    geocoder = new GClientGeocoder();
                    geocoder.getLatLng(newAddress, function(point){
                        if(!point){
                            alert(address + " not found");
                        }else{
                            lat = point.y;
                            longi = point.x;
                            alert("The latitude of " + newAddress + " is " + lat + " and longitude is " + longi);
                            default_address.push([latitude,longitude]);
                            location.href="testmap.php?lat="+lat+"&longi="+longi+"&set="+set+"&newAdd="+newAddress;
                        }                                                   
                    });
                }
            }

            function getType(type){
                //markertype = type;
                document.write("Hello");
            }


     </script>



        </head>

  <body onLoad="initialize_map();">

<div id="main-wrapper">
        <div id="main-padding"> 

    <div id="map_canvas"></div>
            <form name="markertype_form" method = "POST" action = "addMarker.php"  class="form">
                <?php
                    @$submit = $_POST['view'];
                    $selectedtype = '';
                    if(isset($_GET)){
                        $connect = mysql_connect("localhost","root","abc123");
                        mysql_select_db("mapping");
                        $query="SELECT id,typename FROM markertypes ORDER BY typename";

                        $result = mysql_query ($query);
                        echo "<select name='types'>";
                        $types = strip_tags(@$_POST['types']);
                        echo "<option disabled>---------------------Select---------------------</option>";
                        while($nt=mysql_fetch_array($result)){
                            $selected = false;
                            // check if the current value equals the value submited
                            if($_POST['types'] == $nt['id']){
                                $selected = true;
                                $selectedtype = $nt['typename'];
                            }
                            // show selected attribute only if $selected is true
                            echo "<option value='{$nt['id']}' ". ($selected ? "selected" : "") .">{$nt['typename']}</option>";
                        }
                        echo '</select>';
                        echo "</select>";
                        echo "<input type='submit' name ='view' value='View Details'>";// Closing of list box
                        echo '<br>';
                    }
                ?>

            </form>
            <form name="direction_form" onSubmit="addNewMarker(this.new_address.value); return false;" class="form">

                Add markers? Enter the address and we will mark it for you: <input type="text" name="new_address" class="form-field" /><br /><br />

                <input type="submit" value="  Mark this place!  " class="form-submit" />

            </form>

Solution

  • If you put an id on the types select box in your php, then you could add some lines of code to your javascript above.

    Below is assuming the "types" select element has an id of "marker-type":

    function addNewMarker(newAddress){
                var set;
                var lat;
                var longi;
                var e = document.getElementById("marker-type");
                var mtype = e.options[e.selectedIndex].value;
                if(set==null){
                    set=1;
                    geocoder = new GClientGeocoder();
                    geocoder.getLatLng(newAddress, function(point){
                        if(!point){
                            alert(address + " not found");
                        }else{
                            lat = point.y;
                            longi = point.x;
                            alert("The latitude of " + newAddress + " is " + lat + " and longitude is " + longi);
                            default_address.push([latitude,longitude]);
                            location.href="testmap.php?lat="+lat+"&longi="+longi+"&set="+set+"&newAdd="+newAddress+"&type="+mtype;
                        }                                                   
                    });
                }
            }
    

    Please note above, that in the AddMarker function I added a new variable for "mtype" which selects the select box and gets the current option value.

    Then below, where the API calls testmap.php I added the type selector and gave it the value for the "mtype" var.

    Later in your testmap.php code, you just follow on by getting using:

    $_GET['type']