-1

When I load the site everything is displayed fine, but the google map is not loaded until I resize my web browser. I am using jquery mobile.

here attached the html and script i used

<div id="map-canvas" id="map-canvas" style="width: 100%; height: 600px; padding: 0;">
</div>

<script type="text/javascript">
    shopLAT[1] = 30.197932;
    shopLONG[1] = -97.710452;
</script>


<!-- Google Maps -->

<script type="text/javascript">
map="";
//function loadMap() {  
    var latLng = new google.maps.LatLng(shopLAT[1], shopLONG[1]);
    var mapOptions = {
        center: latLng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var infowindow = new google.maps.InfoWindow({content: "Marker"});
    var contentString = "<b>Customer:</b> George Adams";
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        html: contentString
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.html);
        infowindow.open(map,this);
    });
//}

$(document).ready(function(){
    $("#idmaptab").bind('onClick', function() {
        google.maps.event.trigger(map, 'resize');
        $("#map-canvas").css("height","100%");
    });
});
</script>
designerbase
  • 61
  • 3
  • first remove jquery mobile js and css file and check what happens. – Banik Feb 16 '16 at 13:50
  • @banik when removing both js and css, map simply loaded but revert back its not loading.. . . – designerbase Feb 16 '16 at 13:59
  • thats why i told you to remove, dont know the exact issue .I have also faced that kind of problems so I always avoid this particular library.I suggest you to do the same and for ui better to use Bootstrap. – Banik Feb 16 '16 at 14:02
  • @banik but the problem is, entire site is developed using the mobile jquery, so i cant change it for a single error,.the map is loading but it seems only when i manually re-size the browser. i think the re-size function not working properly.. – designerbase Feb 16 '16 at 14:06
  • Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue. – geocodezip Feb 16 '16 at 15:22
  • Possible duplicate of [Embed google map is wrong displayed until resizing webpage](https://stackoverflow.com/questions/19003291/embed-google-map-is-wrong-displayed-until-resizing-webpage) – Md. A. Apu Nov 22 '17 at 11:36

1 Answers1

-1

Try to set the map-canvas height and width in pixels. Then reload the page. See if that helps.

In css: 

#map-canvas{
 width: 200px;
 height:200px;
}
Nagy Istvan
  • 202
  • 3
  • 12