Btukfyl

I am using this code to display a map depending on the post, which may or may not be displayed on the page. I am not initializing the map by default, since it isn't shown until user interacts.

function maps (postnum) {



    var thisDiv = '#'+postnum+'-markers';



    var delay = 10;

    var infowindow = new google.maps.InfoWindow();



    var map = new GMaps({

        div: thisDiv,

        lat: 0,

        lng: 0,

        zoom: 8,

        disableDefaultUI: true,

        zoomControl: true});



    var bounds = new google.maps.LatLngBounds();



    var geocoder = new google.maps.Geocoder();



    function geocodeAddress(address, next) {

        geocoder.geocode({address:address}, function (results,status) { 

            if (status == google.maps.GeocoderStatus.OK) {

                var p = results[0].geometry.location;

                var lat = p.lat();

                var lng = p.lng();

                createMarker(address,lat,lng);

            } else {

                if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {

                    nextAddress--;

                    delay++;

                } else {

                }   

            }

            next();

        });

    }



    function createMarker(add,lat,lng) {



        var contentString = add;

        var marker = new google.maps.Marker({

            position: new google.maps.LatLng(lat,lng),

            setMap: map,

        });



        google.maps.event.addListener(marker, 'click', function() {

            infowindow.setContent(contentString); 

            infowindow.open(map,marker);

        });



        bounds.extend(marker.position);



    }



    var locations = [

        'New Delhi, India',

        'Mumbai, India',

        'Bangaluru, Karnataka, India',

        'Hyderabad, Ahemdabad, India',

        'Gurgaon, Haryana, India'

    ];



    var nextAddress = 0;



    function theNext() {

        if (nextAddress < locations.length) {

            setTimeout(geocodeAddress(locations[nextAddress],theNext), delay);

            nextAddress++;

        } else {

            map.fitBounds(bounds);

        }

    }



    theNext();



};

I later call maps(postnum); once it should be displayed.

The map shows fine and the bounds work as well, but I am not seeing any markers. I have found similar questions, where the error was caused by not calling the map first.

Fiddle

How do I get around this if I don't want to call the map upon page load, rather later?

You have a typo in the marker construction. In the function createMarker:

setMap: map,

should be:

map: map,

updated fiddle

code snippet:

var thisDiv = '1234-markers';



var delay = 10;

var infowindow = new google.maps.InfoWindow();



var map = new google.maps.Map(document.getElementById(thisDiv), {

  center: new google.maps.LatLng(33.808678, -117.918921),

  zoom: 14,

  mapTypeId: google.maps.MapTypeId.ROADMAP

});



var bounds = new google.maps.LatLngBounds();



var geocoder = new google.maps.Geocoder();



function geocodeAddress(address, next) {

  geocoder.geocode({

    address: address

  }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

      var p = results[0].geometry.location;

      var lat = p.lat();

      var lng = p.lng();

      createMarker(address, lat, lng);

    } else {

      if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {

        nextAddress--;

        delay++;

      } else {}

    }

    next();

  });

}



function createMarker(add, lat, lng) {



  var contentString = add;

  var marker = new google.maps.Marker({

    position: new google.maps.LatLng(lat, lng),

    map: map,

  });



  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent(contentString);

    infowindow.open(map, marker);

  });



  bounds.extend(marker.position);



}



var locations = [

  'New Delhi, India',

  'Mumbai, India',

  'Bangaluru, Karnataka, India',

  'Hyderabad, Ahemdabad, India',

  'Gurgaon, Haryana, India'

];



var nextAddress = 0;



function theNext() {

  if (nextAddress < locations.length) {

    setTimeout(geocodeAddress(locations[nextAddress], theNext), delay);

    nextAddress++;

  } else {

    map.fitBounds(bounds);

  }

}



theNext();

body {

  margin: 0;

  padding: 0;

  font: 12px sans-serif;

}



h1,

p {

  margin: 0;

  padding: 0;

}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>

<div id="1234-markers" style="height: 400px;"></div>