Reputation: 557

Trouble -Jquery with Google Map

i want to integrate my map with jquery dialouge box to save scrolling of the form.

Maps is working fine till i am integrating it to jquery ui dialouge box

I also wanted to add textbox to this so that once city like mumbai is entered map would open pointing mumbai.

For efficiency i am posting entire code below:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Get Lat Lon Finder</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"  type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"  type="text/javascript"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-darkness/jquery-ui.css" />
<style>
    .gBubble
    {
        color:black;
        font-family:Tahoma, Geneva, sans-serif;
        font-size:12px;    
    }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker=false;

    $(document).ready(function() 
    {

        $( "#map_container" ).dialog({
            autoOpen:false,
            width: 555,
            height: 400,
            resizeStop: function(event, ui) {google.maps.event.trigger(map, 'resize')  },
            open: function(event, ui) {google.maps.event.trigger(map, 'resize'); }      
        });  

        $( "#showMap" ).click(function() {           
            $( "#map_container" ).dialog( "open" );


            return false;
        });    
        $(  "input:submit,input:button, a, button", "#controls" ).button();

          navigator.geolocation.getCurrentPosition(callback);
    });


function callback(position) {


        var lat = position.coords.latitude;
        var lon = position.coords.longitude;

        document.getElementById('lat').innerHTML = lat;
        document.getElementById('lon').innerHTML = lon;


         var latLong = new google.maps.LatLng(lat,lon);

  var myOptions = {
    zoom: 14,
    center: latLong,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

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

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


     marker.setMap(map);
        map.setZoom(8);
        map.setCenter(marker.getPosition());

  google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();
    document.getElementById("zoom_level").innerHTML = zoomLevel;
  });

  google.maps.event.addListener(marker, 'drag', function(event){
       document.getElementById("lat").innerHTML = event.latLng.lat();
       document.getElementById("lon").innerHTML = event.latLng.lng();

});

  document.getElementById("zoom_level").innerHTML = 14; 
}

</script>
</head>

<body>
    <div id="map_container" title="Location Map">    
        <div id="map_canvas" style="width:100%;height:100%;"></div>
    </div>

    <div id="controls">
        <input type="button" name="showMap" value="Show Map" id="showMap" />
    </div>    

</body>
</html>

Upvotes: 1

Answers (2)

Sam

Reputation: 1104

Try this , now its working fine as per your comment .

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"  type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"  type="text/javascript"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-darkness/jquery-ui.css" />
<style>
    .gBubble
    {
        color:black;
        font-family:Tahoma, Geneva, sans-serif;
        font-size:12px;    
    }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker=false;

    $(document).ready(function() 
    {
         navigator.geolocation.getCurrentPosition(callback);

        $( "#map_container" ).dialog({
            autoOpen:false,
            width: 555,
            height: 400,
            resizeStop: function(event, ui) {google.maps.event.trigger(map, 'resize')  },
            open: function(event, ui) {google.maps.event.trigger(map, 'resize'); }      
        });  

        $( "#showMap" ).click(function() {           
            $( "#map_container" ).dialog( "open" );
          map.setCenter(new google.maps.LatLng(lat,lon), 10);

            return false;
        });    
        $(  "input:submit,input:button, a, button", "#controls" ).button();


    });


function callback(position) {


       var lat = position.coords.latitude;
       var lon = position.coords.longitude;

    var latLong = new google.maps.LatLng(lat,lon);

  var myOptions = {
    zoom: 14,
    center: latLong,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

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

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


     marker.setMap(map);
        map.setZoom(8);
        map.setCenter(marker.getPosition());

  google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();
    document.getElementById("zoom_level").innerHTML = zoomLevel;
  });

  google.maps.event.addListener(marker, 'drag', function(event){
       document.getElementById("lat").innerHTML = event.latLng.lat();
       document.getElementById("lon").innerHTML = event.latLng.lng();

});

  document.getElementById("zoom_level").innerHTML = 14; 
}

</script>
</head>

<body>
    <div id="map_container" title="Location Map">    
        <div id="map_canvas" style="width:100%;height:100%;"></div>
    </div>

    <div id="controls">
        <input type="button" name="showMap" value="Show Map" id="showMap" />
    </div>    

</body>
</html>

Upvotes: 1

Akhlesh

Reputation: 2399

element with id lat and lon are not available that why ur code is not working. see below code

var map;
var marker = false;

function callback(position) {


var lat = position.coords.latitude;
var lon = position.coords.longitude;

//document.getElementById('lat').innerHTML = lat;
//document.getElementById('lon').innerHTML = lon;


var latLong = new google.maps.LatLng(lat,lon);

var myOptions = {
    zoom: 14,
    center: latLong,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

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

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


marker.setMap(map);
map.setZoom(8);
map.setCenter(marker.getPosition());

google.maps.event.addListener(map, 'zoom_changed', function () {
    zoomLevel = map.getZoom();
    document.getElementById("zoom_level").innerHTML = zoomLevel;
});

google.maps.event.addListener(marker, 'drag', function (event) {
    document.getElementById("lat").innerHTML = event.latLng.lat();
    document.getElementById("lon").innerHTML = event.latLng.lng();

});

//document.getElementById("zoom_level").innerHTML = 14;
}
$(document).ready(function () {
//callback();
$("#map_container").dialog({
    autoOpen: false,
    width: 555,
    height: 400,
    resizeStop: function (event, ui) {
        google.maps.event.trigger(map, 'resize')
    },
    open: function (event, ui) {
        google.maps.event.trigger(map, 'resize');
    }
});

$("#showMap").click(function () {
    $("#map_container").dialog("open");


    return false;
});
$("input:submit,input:button, a, button", "#controls").button();

navigator.geolocation.getCurrentPosition(callback);
});

Working Fiddle

Upvotes: 2

Trouble -Jquery with Google Map

Answers (2)

Related Questions