• Code for displaying map with Jquery

    Kindly find the below code for displaying map with Jquery.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    
    &lt;!doctype html&gt;<meta charset="utf-8" />
     
    	<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script><script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><script type="text/javascript">// <![CDATA[
    $(function() {
    function latlong() {
    return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
    }
    function position() {
    map.setCenter( latlong() );
    }
    $( "#lat, #lng" ).spinner({
    step: .001,
    change: position,
    stop: position
    });
    var map = new google.maps.Map( $("#map")[0], {
    zoom: 16,
    center: latlong(),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    });
    // ]]></script>
    1
    2
    
    <label for="lat">Latitude</label> <input id="lat" type="text" name="lat" value="44.797" /> 
     <label for="lng">Longitude</label> <input id="lng" type="text" name="lng" value="-93.278" />

Comments on this post

Leave a Reply

  • Security Code :


    one + 4 =