<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
    function initialize() {

<?php
foreach ($geo_info as $v_info) {
    ?>
            var myLatlng<?php echo $v_info->geo_id ?> = new google.maps.LatLng(<?php echo $v_info->latitude ?>,<?php echo $v_info->longitude ?>);
    <?php
}
?>
        var mapOptions = {
            zoom: 2,
            center: new google.maps.LatLng(0, 0),
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


<?php
foreach ($geo_info as $v_info) {
    ?>
            var marker = new google.maps.Marker({
                position: myLatlng<?php echo $v_info->geo_id ?>,
                map: map,
                title: '<?php echo $v_info->person_first_name . ' ' . $v_info->person_last_name . ',' . $v_info->city_name ?>',
            });
    <?php
}
?>


//  var infowindow = new google.maps.InfoWindow({
//      content: "miron jahan",
//      maxWidth: 200
//  });
//
//  google.maps.event.addListener(marker, 'click', function() {
//    infowindow.open(map,marker);
//  });



    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>


<br>
<br>

<form id="formID2" action="<?php echo base_url() . 'profile_id/travels/update_travel_location/' . $this->session->userdata('person_id'); ?>" method="post">


    <div class="col-sm-12">
        <div class="col-sm-12">
            <div class="col-sm-12">
                <div id="map-canvas" style="width:100%;height:70%;"></div>
            </div>
        </div>        
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="col-sm-12" id="country_list">

    </div>

</form>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

    function initialize_map() {
        geocoder = new google.maps.Geocoder();
        var myOptions = {
            zoom: 2,
            center: new google.maps.LatLng(13.288828765662416, 80.945261001586914),
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };




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

        // initialize marker

        var marker = new google.maps.Marker({
            position: map.getCenter(),
            draggable: true,
            map: map
        });

        // intercept map and marker movements
        google.maps.event.addListener(map, "idle", function () {
            marker.setPosition(map.getCenter());

            var latitude = map.getCenter().lat().toFixed(6);
            var longitude = map.getCenter().lng().toFixed(6);
            document.getElementById("latitude").value = latitude;
            document.getElementById("longitude").value = longitude;
            google.maps.event.trigger(map, "resize");
        });
        google.maps.event.addListener(marker, "dragend", function (mapEvent) {
            map.panTo(mapEvent.latLng);
        });


        findAddress("Bangladesh");
    }

    function findAddress(address) {
        if ((address != '') && geocoder) {
            geocoder.geocode({'address': address}, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                        if (results && results[0]
                                && results[0].geometry && results[0].geometry.viewport)
                            map.fitBounds(results[0].geometry.viewport);
                    } else {
                        alert("No results found");
                    }
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }
    }

</script>

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>-->
<script type="text/javascript">
    $(document).ready(function () {
        $("#person_country").on("keypress keyup keydown blur change", function () {
            var address = $("#city").val() + ' ' + $("#country_name").val();
//            alert(address);
            findAddress(address);
        });

        $("#person_city").on("keypress keyup keydown blur change", function () {
            var address = $("#city").val() + ' ' + $("#country_name").val();
            findAddress(address);
        });



    });
</script>



<div class="col-md-12">
    <div class="col-md-12">
        <form id="formID2"class="form-horizontal" action="<?php echo base_url() . 'travels/add_to_geo_location' ?>" method="POST">


            <div class="form-group col-sm-12">

                <script src="<?php echo base_url(); ?>public/admin/js/countries.js"></script>
                <div class="form-group col-sm-4">
                    <label class="control-label" for="typeahead">Country<span style="color: red">*</span></label>
                    <div class="controls">
                        <select  
                            data-errormessage-value-missing="Person Country is required!"
                            class="form-control validate[required] text-input" 
                            id="person_country" 
                            name ="person_country">

                            <script language="javascript">
    populateCountries("person_country", "person_city");  // ....for Country with State
                            </script>

                        </select>
                    </div>
                    <div class="form-group col-sm-4" id="country_status"></div>
                </div>

                <div class="form-group col-sm-4">
                    <label for="typeahead">City<span style="color: red">*</span></label>
                    <div class="controls">
                        <select  
                            data-errormessage-value-missing="Person City is required!"
                            class="form-control validate[required] text-input" 
                            name ="person_city" 
                            id ="person_city" onchange="setCity(this.value);">
                        </select>
                        <script>
                            function setCity(city) {
                                document.getElementById('city').value = city;

                            }
                        </script>
                    </div>
                    <div class="form-group col-sm-4" id="city_status"></div>
                </div>

                <div class="form-group col-sm-12 danger required"><?php echo form_error('person_country'); ?></div>

                <input name="country_code" id="country_code" type="hidden" value="">

                <div class="form-group col-sm-2">
                    <input type="hidden" 
                           data-errormessage-value-missing="Person Zip/Postal Code is required!"
                           class="form-control validate[required, custom[number]] text-input" 
                           name="person_zip" maxlength="5" class="form-control" value="<?php echo set_value('person_zip'); ?>" >
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-10">
                    <input data-errormessage-value-missing="Person Email is required!" 
                           class="form-control validate[required] text-input" 
                           type="hidden" class="form-control" 
                           id="country_name" name="country_name" placeholder="Country" value="">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-10">
                    <input type="hidden" class="form-control" id="city" name="city" placeholder="City" value="">
                </div>
            </div>
            <div class="col-md-12">
                <div id="map_canvas" style="width:100%;height:70%;">
                </div>
                <!-- Text boxes to show lat long values -->
                <div class="input-group col-md-6 pull-left">
                    <span class="input-group-addon">Latitude</span>
                    <input type="text" id="latitude" name="latitude" class="form-control">
                </div>
                <div class="input-group col-md-6 pull-left">
                    <span class="input-group-addon" >Longitude</span>
                    <input type="text" class="form-control" id="longitude" name="longitude">
                </div>
            </div>

            <div class="form-group ">
                <br>
                <br>
                <br>
                <input type="submit" class="form-control btn btn-success" id="add_geo_location" value="Add Geo Location">
            </div>


        </form>
    </div>
</div>

<script>
    function updateTravelLocation() {

    }
</script>

<script>
    $.noConflict();
</script>