locationview

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script>
$(document).ready(function() {
     function submitMe(selector)
   {
       //alert(selector);
    $.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>" + "index.php/locationcontroller/getLocation",
       data: {location:selector },
       success:function(longitude){
//           alert(selector);
        locate=longitude.split(" ");
        latlong(locate[0],locate[1],selector);

    }

});
}

 $('#address').blur(function(){
 var add=$('#address').val();
// alert(add);
       submitMe(add);
 });


});
function latlong(lat,long,selector)
 {

     alert(lat);
     alert(long);
     var selector=selector;
     var myLatlng = new google.maps.LatLng(lat,long);
     var map;
var marker;

var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function initialize(){
var mapOptions = {
zoom: 18,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("myMap"), mapOptions);

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

geocoder.geocode({'latLng': myLatlng }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#latitude,#longitude').show();
selector=results[0].formatted_address;
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});

google.maps.event.addListener(marker, 'dragend', function() {

geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
selector=results[0].formatted_address;
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
});

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

 }
</script>
    </head>
    <body>
        <form method="POST">
            <div id="myMap"></div>
<!--<input id="" type="text" style="width:600px;"/><br/>-->
            <input type="text" id="address" name="address" />
<input type="text" id="latitude" placeholder="Latitude"/>
<input type="text" id="longitude" placeholder="Longitude"/>
<input type="submit" name="submit">
        </form>

    </body>
<style>
#myMap {
   height: 350px;
   width: 680px;
}
</style>
</html>