Post
Ask Question
Dharmesh Sharma

Dharmesh Sharma

  • NA
  • 905
  • 927.1k

how to show google map in popup on address basis

May 30 2012 3:12 AM
hello ,
i am show google map in popup with coordinate its show but when i pass address then get coordinate,

that not show coz my coordinate come after initialize function run on window load
so any body help me to show map in popup on the address basis

this is my code
<html>
<head>
    <title>Map in FancyBox popup</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
        #container
        {
            left: -100000px;
            position: relative !important;
        }
       
        #map_canvas
        {
            margin: 0;
            padding: 0;
            height: 500px;
            width: 500px;
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
    <script src="fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
    <link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
  
</head>
<body>
    <a id="inline" href="#map_canvas">Open Map</a>
    <div id="container">
        <div id="map_canvas">
        </div>
    </div>
</body>
<script type="text/javascript">
    var lat;
    var lng;
    var map;
    $(document).ready(function () {

        var geocoder = new google.maps.Geocoder();
        var input_address = "India Delhi";
        geocoder.geocode({ address: input_address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var lat = results[0].geometry.location.lat();
                var lng = results[0].geometry.location.lng();
                alert(lat);
                // set input form
                var components = results[0].address_components;

                // $("#latitude").val(lat);
                // $("#longitude").val(lng);
                // set img static maps

                // $("#maps").html('<img src="http://maps.google.com/maps/api/staticmap?markers=' + lat + ',' + lng + '&zoom=11&size=450x450&sensor=false" alt="Picture alone 1" />');

                // $(".fisarmonica").fadeIn();
            }
            else {
                alert("Google Maps not found address!");
            }
        });

    });
    function initialize() {

       

        var myOptions = {

            zoom: 8,

            center: new google.maps.LatLng(lat, lng),
           
            mapTypeId: google.maps.MapTypeId.ROADMAP

        };
        alert(lat);
        alert(lng);
        map = new google.maps.Map(document.getElementById('map_canvas'),

            myOptions);

    }


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

    $("a#inline").fancybox();


</script>
</html>
?????