google map is not loading fully

Question

I am new on this website and i am having some problem with my website page. where i want to show google map on my website it work fine, but when i am using it under tab jquery(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js) which i used for show content one by one. it is not load properly. please see map under location map tab on my website. link is shown below.

http://www.21flats.com/beta/property_detail/16/8/Ranikhet/Ranikhet.html

    <script type="text/javascript">
                 var lat=document.getElementById('lat').value;
                 var lon=document.getElementById('lon').value;
                 setTimeout(getlocation(lat,lon), 100);

                 function getlocation(lat,lon)
                 {
                  google.maps.event.addDomListener(window, 'load', function() {

                    var map = new google.maps.Map(document.getElementById('map'), {
                      zoom: 13,
                      center: new google.maps.LatLng(lat,lon),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

                    var infoWindow = new google.maps.InfoWindow;

                    var onMarkerClick = function() {
                      var marker = this;
                      var latLng = marker.getPosition();
                      infoWindow.setContent('<h3>This is my project:</h3>' +
                          latLng.lat() + ', ' + latLng.lng());

                      infoWindow.open(map, marker);
                    };
                    google.maps.event.addListener(map, 'click', function() {
                      infoWindow.close();
                    });

                    var marker1 = new google.maps.Marker({
                      map: map,
                      position: new google.maps.LatLng(lat,lon)
                    });

                    google.maps.event.addListener(marker1, 'click', onMarkerClick);



                  });
                  }
                </script>

  <div id="map" style="width: 640px;height: 450px;border:1px solid #999999;"></div>
  ..m using this how can i call "google.maps.event.trigger(map, 'resize')" this function in my function.

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

I think there is a good chance that your problem is related to the fact that the map is located in a hidden div (closed jquery tab), and is displayed only when clicking on the tab.

I have experienced this problem and solved it using solutions proposed in this thread: Google map display from a hidden area

edited May 23 '17 at 12:27

Community

1
1

answered Feb 02 '12 at 11:14

legzo

101
1
5

score 0 · Answer 2 · answered Feb 02 '12 at 12:55

Try this one, its easy to control by just changing your desired latitude & longitude and also put marker image by your self.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            function initialize() {
                var latlng = new google.maps.LatLng(25.2894045564648903, 51.49017333985673);
                var settings = {
                    zoom: 12,
                    center: latlng,
                    mapTypeControl: true,
                    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                    navigationControl: true,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                    mapTypeId: google.maps.MapTypeId.ROADMAP};
                var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
                var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h1 id="firstHeading" class="firstHeading">Area name</h1>'+
                    '<div id="bodyContent">'+
                    '<p align="left" >P.O.Box : 666666 - Dubai, UAE <br> Tel : (+971) 789789789</p>'+
                    '</div>'+
                    '</div>';
                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });
                var companyImage = new google.maps.MarkerImage('images/marker.png',
                    new google.maps.Size(100,50),
                    new google.maps.Point(0,0),
                    new google.maps.Point(50,50)
                );
                var companyPos = new google.maps.LatLng(25.2894045564648903, 51.49017333985673);
                var companyMarker = new google.maps.Marker({
                    position: companyPos,
                    map: map,
                    icon: companyImage,
                    title:"Location Name",
                    zIndex: 3});

                google.maps.event.addListener(companyMarker, 'click', function() {
                    infowindow.open(map,companyMarker);
                });
            }
        </script>

    <body onLoad="initialize()">
        <div id="map_canvas" style="width:400px; height:460px"></div>
    </body>

i am getting the same problem with this also. anyway thanks for your support. — Navjot singh, Feb 02 '12 at 13:12

score 0 · Answer 3 · answered Feb 03 '12 at 06:42

0

There is some grammatically mistake in my answer please ignore that. Now my work is done. i am using and make another file for google map and call that frame on click of my tab.now google map is work very fine..

answered Feb 03 '12 at 06:42

Navjot singh

1
4

google map is not loading fully

3 Answers3