Google maps opening infoWindow on first not clustered marker

I’am newbe. Sorry for my english. I made on my site(WordPress) page with google map. The markers cordinate are from every post who has acf(Advanced Custom Field) with lt, lng. When i click on the marker then open InfoWindow with thumbnaile and link to the post. I don’t know how force on the map that when map loads the first random non clustered marker Infowindow be visble

    
(function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $el (jQuery element)
*  @return  n/a
*/

function render_map( $el ) {

// var
var $markers = $el.find('.marker');

// vars
var args = {
    zoom        : 10,
    center      : new google.maps.LatLng(0, 0),
    mapTypeId   : google.maps.MapTypeId.ROADMAP,
    scrollwheel : true
};

// create map               
var map = new google.maps.Map( $el[0], args);
$(window).resize(function() {
    // (the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");

  });
// add a markers reference
map.markers = [];




// add markers
$markers.each(function(){

    add_marker( $(this), map );

});

// center map
center_map( map );

markerCluster( map.markers, map );  


}
// create info window outside of each - then tell that singular infowindow to swap content based on click
var infowindow = new google.maps.InfoWindow({
content     : '' 
});

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $marker (jQuery element)
*  @param   map (Google Map object)
*  @return  n/a
*/

function add_marker( $marker, map ) {

// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

// create marker
var marker = new google.maps.Marker({
    position    : latlng,
    map         : map
});

// add to array
map.markers.push( marker );

// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{




    // show info window when marker is clicked & close other markers
    google.maps.event.addListener(marker, 'click', function() {
        //swap content of that singular infowindow
                infowindow.setContent($marker.html());

                infowindow.open(map, marker);
    });


    // close info window when map is clicked
         google.maps.event.addListener(map, 'click', function(event) {
             if (infowindow) {
               infowindow.close(); }
            }); 


}

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   map (Google Map object)
*  @return  n/a
*/

function center_map( map ) {

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

// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){

    var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

    bounds.extend( latlng );

});

// only 1 marker?
if( map.markers.length == 1 )
{
    // set center of map
    map.setCenter( bounds.getCenter() );
    map.setZoom( 16 );
}
else
{
    // fit to bounds
    map.fitBounds( bounds );
}

}

function markerCluster( markers, map ) {
    var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
    //console.log( markers );
    google.maps.event.addListener(map, 'idle', function() {

        console.clear();
             for ( i=0;i



  
'publish', 'post_type' => 'post', 'tax_query' => array( array( 'taxonomy' => 'post_format', 'terms' => array( 'post-format-gallery' ), 'field' => 'slug', ), ), 'posts_per_page' => -1, //sets to unlimited to pull all posts ) ); ?>
have_posts() ) : $mapposts->the_post(); ?> <?php endwhile; ?> </div><!-- .acf-map --> <?php wp_reset_query(); // Restore global post data stomped by the_post(). ?> Source: stackoverflow-javascript

javascript googlemaps missing lat and long

I have a script that auto fills form in whem address is added, I would like to add the lat and long to a hidden input but keep getting error? It works fine but everytime i add a field for lat it stops?

the code is

 <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <style>
      #locationField, #controls {
        position: relative;
        width: 480px;
      }
      #autocomplete {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 99%;
      }
      .label {
        text-align: right;
        font-weight: bold;
        width: 100px;
        color: #303030;
      }
      #address {
        border: 1px solid #000090;
        background-color: #f0f0ff;
        width: 480px;
        padding-right: 2px;
      }
      #address td {
        font-size: 10pt;
      }
      .field {
        width: 99%;
      }
      .slimField {
        width: 80px;
      }
      .wideField {
        width: 200px;
      }
      #locationField {
        height: 20px;
        margin-bottom: 2px;
      }
    </style>
  </head>

  <body>
    
<table id="address"> <tr> <td class="label">Street address</td> <td class="slimField"><input class="field" id="street_number" disabled="true"></input></td> <td class="wideField" colspan="2"><input class="field" id="route" disabled="true"></input></td> </tr> <tr> <td class="label">City</td> <!-- Note: Selection of address components in this example is typical. You may need to adjust it for the locations relevant to your app. See https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform --> <td class="wideField" colspan="3"><input class="field" id="locality" disabled="true"></input></td> </tr> <tr> <td class="label">State</td> <td class="slimField"><input class="field" id="administrative_area_level_1" disabled="true"></input></td> <td class="label">Zip code</td> <td class="wideField"><input class="field" id="postal_code" disabled="true"></input></td> </tr> <tr> <td class="label">Country</td> <td class="wideField" colspan="3"><input class="field" id="country" disabled="true"></input></td> </tr> </table> // This example displays an address form, using the autocomplete feature // of the Google Places API to help users fill in the information. // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // var placeSearch, autocomplete; var componentForm = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_1: 'short_name', country: 'long_name', postal_code: 'short_name' }; function initAutocomplete() { // Create the autocomplete object, restricting the search to geographical // location types. autocomplete = new google.maps.places.Autocomplete( /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), {types: ['geocode']}); // When the user selects an address from the dropdown, populate the address // fields in the form. autocomplete.addListener('place_changed', fillInAddress); } function fillInAddress() { // Get the place details from the autocomplete object. var place = autocomplete.getPlace(); for (var component in componentForm) { document.getElementById(component).value = ''; document.getElementById(component).disabled = false; } // Get each component of the address from the place details // and fill the corresponding field on the form. for (var i = 0; i <script src="https://maps.googleapis


Source: stackoverflow-javascript