map is working after inspect element or zoom

Question

Here is the strange thing coming to our website, on zooming or inspecting the element the maps come

Here is the website, on clicking on the marker of location the maps does not visible first of all but after inspecting the map and the marker shows on the screen. site URL https://allinfo.co.il/allin/index.php/website/searchBusiness/625#

Here are the script and source code

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98">
</script>

<script type="text/javascript">
<?php
//first location
if(isset($results[0]['latitude']))
{
    $latitude1=$results[0]['latitude'];
    $longitude1=$results[0]['longitude'];
    $location1="['loan 1',".$latitude1.",".$longitude1.",'business 1']";

}
else 
{
    $location1=$latitude1=$longitude1='';
}
//second location
if(isset($results[1]['latitude']))
{
    $latitude2=$results[1]['latitude'];
    $longitude2=$results[1]['longitude'];
    $location2=",['loan 2',".$latitude2.",".$longitude2.",'business 2']";
}
else 
{
    $location2=$latitude2=$longitude2='';
}
//thired location
if(isset($results[2]['latitude']))
{
    $latitude3=$results[2]['latitude'];
    $longitude3=$results[2]['longitude'];
    $location3=",['loan 3',".$latitude3.",".$longitude3.",'business 3']";
}
else 
{
    $location3=$latitude3=$longitude3='';
}
//fourth location
if(isset($results[3]['latitude']))
{
    $latitude4=$results[3]['latitude'];
    $longitude4=$results[3]['longitude'];
    $location4=",['loan 4',".$latitude4.",".$longitude4.",'business 4']";
}
else 
{
    $location4=$latitude4=$longitude4='';
}
//fifth location
if(isset($results[4]['latitude']))
{
    $latitude5=$results[4]['latitude'];
    $longitude5=$results[4]['longitude'];
    $location5=",['loan 5',".$latitude5.",".$longitude5.",'business 5']";
}
else 
{
    $location5=$latitude5=$longitude5='';
}
//sisth location
if(isset($results[5]['latitude']))
{
    $latitude6=$results[5]['latitude'];
    $longitude6=$results[5]['longitude'];
    $location6=",['loan 6',".$latitude6.",".$longitude6.",'business 6']";
}
else 
{
    $location6=$latitude6=$longitude6='';
}
//seventh location
if(isset($results[6]['latitude']))
{
    $latitude7=$results[6]['latitude'];
    $longitude7=$results[6]['longitude'];
    $location7=",['loan 7',".$latitude7.",".$longitude7.",'business 7']";
}
else 
{
    $location7=$latitude7=$longitude7='';
}
//eighth location
if(isset($results[7]['latitude']))
{
    $latitude8=$results[7]['latitude'];
    $longitude8=$results[7]['longitude'];
    $location8=",['loan 8',".$latitude8.",".$longitude8.",'business 8']";
}
else 
{
    $location8=$latitude8=$longitude8='';
}
//nineth location
if(isset($results[8]['latitude']))
{
    $latitude9=$results[8]['latitude'];
    $longitude9=$results[8]['longitude'];
    $location9=",['loan 9',".$latitude9.",".$longitude9.",'business 9']";
}
else 
{
    $location9=$latitude9=$longitude9='';

}
?>
var locations = [<?php echo $location1.$location2.$location3.$location4.$location5.$location6.$location7.$location8.$location9 ?>];

  function initialize() {

    var myOptions = {
      center: new google.maps.LatLng(<?php echo $latitude1.','.$longitude1; ?>),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map,locations)
        google.maps.event.addListenerOnce(map, 'idle', function () {
            google.maps.event.trigger(map, 'resize');
        });
    }



  function setMarkers(map,locations){

      var marker, i

for (i = 0; i < locations.length; i++)
 {  

 var loan = locations[i][0]
 var lat = locations[i][1]
 var long = locations[i][2]
 var add =  locations[i][3]

 latlngset = new google.maps.LatLng(lat, long);

  var marker = new google.maps.Marker({  
          map: map, title: loan , position: latlngset  
        });
        map.setCenter(marker.getPosition())


        var content = "Latitude: " + lat +  '</h3>' + "Longitude: " + long     

  var infowindow = new google.maps.InfoWindow()

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
        return function() {
           infowindow.setContent(content);
           infowindow.open(map,marker);
        };
    })(marker,content,infowindow)); 

  }

  }



  </script>

here is the HTML code

<div id="map_govinda">
        <div id="default"></div>
    </div>

here are the locations, lat-longs are coming from the database.

try to add css height `#your_map_id {height: 400px;}` and check again — chirag satapara, Sep 06 '17 at 07:47
Possible duplicate of [Google map not fully loaded when i open inspect element it will work](https://stackoverflow.com/questions/23755975/google-map-not-fully-loaded-when-i-open-inspect-element-it-will-work) — Ahmad Hassan, Sep 06 '17 at 08:11

score 2 · Accepted Answer · answered Sep 06 '17 at 09:24

I always avoid initializing the map when the map canvas is not visible (yet).
Usually this can be solved with trigger(map, 'resize') ... , which you already tried.

Try this: initialize the map only after the click on "map.png"

so remove this: body onload="initialize()", and try this

$("#go_map").click(function(){
    $("#cate_list_view").hide(1000);
    $("#go_map").hide(1000);
    $("#map_govinda").show(1000, function() {
      // we'll wait until the canvas for the map is fully visible
      if(! map) {  // this will only trigger once
        initialize();
      }
    });
    $("#go_list").show(1000);
});

var map;  // put the map object somewhere global, so we can access it anywhere

function initialize() {
  var myOptions = {
    center: new google.maps.LatLng(31.779966,35.221211),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("default"), myOptions);
  setMarkers(map,locations);
}

$("#map_govinda").show(1000, function() { // we'll wait until the canvas for the map is fully visible if(! map) { // this will only trigger once initialize(); } }); this logic works — Harshit Sethi, Sep 07 '17 at 11:29

map is working after inspect element or zoom

1 Answers1