aaron4osu

Thanks @bcworkz but that’s not what I was talking about. I’m referring to how the images are displayed on the media page… not the size it’s storing thumbnails for use on the front end. In other words, when you go to the media page rather than seeing square thumbnails with of the images (149px x 149px) they would be 225px wide and 149px tall.

I was able to figure it out using wp-ultimate-csv-importer-pro plugin. here is what I did if anyone else comes across this…

1. Imported parent categories by themselves.
2. Then, Imported subcategories using a csv sheet with pairs of parent and child categories, and used wp-ultimate-csv-importer-pro to identify the parent.
3. then imported businesses as normal indicating parent and child categories.

thanks again @bcworkz… can you point me in the right direction on how to define the relationship? I don’t see an option in the import tool I’m using.

thanks @bcworkz . So I would important them in first without identifying the parent child relationship. This would get all the categories (parent and child) into wordpress. Then, export the business listings with categories that now have an id. Then important them in with a connection? In that final step how would I create the parent child relationship?

FYI.. I’m using wp-ultimate-csv-importer-pro to import?

• This reply was modified 1 year, 10 months ago by aaron4osu.

Thanks again @ashfame… unfortunately I think that route is gonna be beyond what I understand…

So circling back to the original question… just to confirm.. there is no way I can just connect to the the other wp install and write post loops using the typical wordpress functions?

Thanks again, but I’m still having trouble understanding how to loop through the post type with this technique.

I ran the following code and got an array with all the tables, but what do I do with that?

$wpdb2 = new wpdb( XDB_USER, XDB_PASSWORD, XDB_NAME, XDB_HOST );
$query = "show tables";
print_r( $wpdb2->get_results( $query ) );

I also create a mysql query and using print_r it outputted everything on the page

$talent = “SELECT * FROM wp_posts WHERE post_type = ‘the-talent'”;

So $talent has all the posts of custom post type talent… but the output using print_r is only showing basic post data and not any of the advanced custom fields data that would normally show when I run the typical post query.

is there a way to loop through each post inside the $talent variable to get it’s advanced custom fields?… something like this..

if( $talent->have_posts() ) {
      while( $talent->have_posts() ) {
        
        $talent->the_post();
        $name = get_field('name');
        $bio = get_field('bio');
        $main_image = get_field('main_image');
        
        // do something with variables

      }// end while

    }// endif

`

• This reply was modified 3 years, 2 months ago by aaron4osu.
• This reply was modified 3 years, 2 months ago by aaron4osu.

Thanks @ashfame I’m still having issues trying to figure this out. How can I run a query for my custom post type of Talent? and then loop through and get each talent post? Here is what I’m trying to do… the original query line is commented out so you can see what I was doing which works.

// set up second DB
$DB_NAME2 = '...';
$DB_USER2 = '...';
$DB_PASSWORD2 = '...';
$DB_HOST2 = 'localhost';

$second_db = new wpdb($DB_USER2, $DB_PASSWORD2, $DB_NAME2, $DB_HOST2);

$location = 'locationName';

$args = "";

$args = array( 
  'orderby' => 'title',
  'order' => 'ASC',
  'post_type' => 'the-talent',
  'tax_query' => array(
      array (
          'taxonomy' => 'location',
          'field' => 'slug',
          'terms' => $location,
      )
  ),
  'posts_per_page'=>-1
  );
    
  
  //$talent = new WP_Query( $args );
  $talent = $second_db->get_results($args);
        
    if( $talent->have_posts() ) {
      while( $talent->have_posts() ) {
        
        $talent->the_post();
        $name = get_field('name');
        $bio = get_field('bio');
        $main_image = get_field('main_image');
        
        // do something with variables

      }// end while

    }// endif

@bcworkz I have one more issue that I’m trying to work out on this. When you click the different info windows that popup, they do not close when you click off of them on the map or even when you open another. How can I make it so that after you click on one popup, then when you click another it closes the previous one. I’m guessing some how I can create a separate event listener that waits for clicking off the map or at least clicking a 2nd info window? Not sure about the syntax.

I tried adding this after the first event listener.

google.maps.event.addListener(map, "click", function(event) {
                infowindows[this.index].close();
            });

full code for section:

var cards = [];
      var markers=[];
      var infowindows = [];

      <?php
       // looop through each location and create marker and event listener
      while( $locations->have_posts() ) {

            $locations->the_post();

        if(get_field('latitude') && get_field('longitude')){
            $location_name = get_field('location_name');
            $latitude = get_field('latitude');
            $longitude = get_field('longitude'); 
            $phone = get_field('phone');
            ?>
            // create marker
            markers[<?php echo $count;?>] = new google.maps.Marker({
              position: { lat:<?php echo $latitude; ?>, lng: <?php echo $longitude; ?> },
              map,
              icon: image
            });

            markers[<?php echo $count;?>].index = <?php echo $count;?>; //add index property
            //create card
            cards[<?php echo $count;?>] = 
              '<div class="card">'+
                '<div class="card-header"><?php echo $location_name; ?></div>'+
                '<div class="card-body">'+
                // '<p class="card-text mb-2">Phone: <?php echo $phone; ?></p>'+
                 '<a>" class="btn btn-block btn-primary">View Location</a>'+
                '</div>'
              '</div>';

            // create info window and add card to it
            infowindows[<?php echo $count;?>] = new google.maps.InfoWindow({
                content: cards[<?php echo $count;?>],
                
            });
            
            // add event listener to marker and connect to info window
            google.maps.event.addListener(markers[<?php echo $count;?>], 'click', function() {
                infowindows[this.index].open(map,markers[this.index]);
                map.panTo(markers[this.index].getPosition());
            }); 

            google.maps.event.addListener(map, "click", function(event) {
                infowindows[this.index].close();
            });

            <?php $count++; ?>

• This reply was modified 3 years, 2 months ago by aaron4osu.

I figured out the rest. This is the final script in case anyone else needs this…

function initMap() {

  <?php 
    // center of map default
    $centeredLatitude = "39.1203097150555"; 
    $centeredLongitude = "-80.33246546973088";
  ?> 
    // create map
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 7,
      center: { lat:<?php echo $centeredLatitude; ?>, lng: <?php echo $centeredLongitude; ?> },
      styles: mapStyles,
    });
  
    // set map icon
    const image ="https://eatpokebros.com/wp-content/themes/poke-signal-theme/assets/img/footer-fish-icon-40.png";

  <?php 
    // pull all locations
    $args = array( 
      'orderby' => 'title',
      'order' => 'ASC',
      'post_type' => 'location', 
      'posts_per_page'=>-1
      );
    $locations = new WP_Query( $args );
    if( $locations->have_posts() ) {
   
      $count=0; ?>
      
      // initiate arrays
      var cards = [];
      var markers=[];
      var infowindows = [];

      <?php
       // looop through each location and create marker and event listener
      while( $locations->have_posts() ) {
        $locations->the_post();
        $location_name = get_field('location_name');
        $latitude = get_field('latitude');
        $longitude = get_field('longitude'); 
        $phone = get_field('phone');
        ?>
        // create marker
        markers[<?php echo $count;?>] = new google.maps.Marker({
          position: { lat:<?php echo $latitude; ?>, lng: <?php echo $longitude; ?> },
          map,
          icon: image
        });

        markers[<?php echo $count;?>].index = <?php echo $count;?>; //add index property
        //create card
        cards[<?php echo $count;?>] = 
          '<div class="card">'+
            '<div class="card-header"><?php echo $location_name; ?></div>'+
            '<div class="card-body">'+
             '<p class="card-text">Phone: <?php echo $phone; ?></div>'+
             '<a href="<?php echo get_the_permalink() ?>" class="btn btn-primary">Location Details</a>'+
            '</div>'
          '</div>';

        // create info window and add card to it
        infowindows[<?php echo $count;?>] = new google.maps.InfoWindow({
            content: cards[<?php echo $count;?>],
            
        });
        
        // add event listener to marker and connect to info window
        google.maps.event.addListener(markers[<?php echo $count;?>], 'click', function() {
            infowindows[this.index].open(map,markers[this.index]);
            map.panTo(markers[this.index].getPosition());
        }); 

        <?php $count++; ?>

  <?php } // end while ?>

      // center on users location if they allow
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function (position) {
            initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.setCenter(initialLocation);
          });
      }

      <?php
      wp_reset_postdata();
    } // endif 
  ?>
}//initMap
window.onload = initMap;

</script>

@bcworkz thanks again. it’s getting close. So I added the counter, and created a cards array as you suggested. I’m not getting an errors, and the inspector shows all the cards are being created. How do I pass each card to the event listener?

Here is what I have now.

function initMap() {

  <?php 
    // center of map default
    $centeredLatitude = "39.1203097150555"; 
    $centeredLongitude = "-80.33246546973088";
  ?> 

  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: { lat:<?php echo $centeredLatitude; ?>, lng: <?php echo $centeredLongitude; ?> },
    styles: mapStyles,
  });
  
  const image ="https://eatpokebros.com/wp-content/themes/poke-signal-theme/assets/img/footer-fish-icon-40.png";

  <?php 
    // pull all locations
    $args = array( 
      'orderby' => 'title',
      'order' => 'ASC',
      'post_type' => 'location', 
      'posts_per_page'=>-1
      );
    $locations = new WP_Query( $args );
    if( $locations->have_posts() ) {
   
      $count=0; ?>

      const cards = [];

      <?php
       // looop through each location and create marker and event listener
      while( $locations->have_posts() ) {
        $locations->the_post();
        $location_name = get_field('location_name');
        $latitude = get_field('latitude');
        $longitude = get_field('longitude'); 
        $phone = get_field('phone');
        ?>

        cards[<?php echo $count;?>] = 
        '<div class="card">'+
        '<div class="card-header"><?php echo $location_name; ?></div>'+
        '<div class="card-body">'+
         '<p class="card-text">Phone: <?php echo $phone; ?></div>'+
         '<a href="<?php echo get_the_permalink() ?>" class="btn btn-primary">Location Details</a>'+
        '</div>'
        '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: cards[<?php echo $count;?>],
        });
        
        var marker = new google.maps.Marker({
          position: { lat:<?php echo $latitude; ?>, lng: <?php echo $longitude; ?> },
          map,
          icon: image,
        });

        marker.addListener("click", () => {
          infowindow.open({
            anchor: marker,
            map,
            shouldFocus: false,
          });
        });

        <?php $count++; ?>

  <?php } // end while ?>

      // center on users location if they allow
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function (position) {
            initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.setCenter(initialLocation);
          });
      }

      <?php
      wp_reset_postdata();
    } // endif 
  ?>
}//initMap
window.onload = initMap;

Thanks again for all your help

Thanks @bcworkz! that fixed it. So Ive got the markers added to the map and I’m trying to add an event listener and info window popup to each marker to display a phone number and link to the that location. The problem when you click any of the 40+ markers it’s popping up the same marker regardless of which marker you click on. and it’s the last marker in the loop so I’m guessing the event listen is just attaching to the last one and that I need some kind of unique identifier for each one? Any ideas?

function initMap() {

  <?php 
    $centeredLatitude = "39.1203097150555"; 
    $centeredLongitude = "-80.33246546973088";
  ?> 

  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: { lat:<?php echo $centeredLatitude; ?>, lng: <?php echo $centeredLongitude; ?> },
    styles: mapStyles,
  });
  
  const image ="footer-fish-icon-40.png";

  <?php 

    $args = array( 
      'orderby' => 'title',
      'order' => 'ASC',
      'post_type' => 'location', 
      'posts_per_page'=>-1
      );
    
    $locations = new WP_Query( $args );
 
    if( $locations->have_posts() ) {
      // looop through each location and create marker
      while( $locations->have_posts() ) {
        $locations->the_post();
        $location_name = get_field('location_name');
        $latitude = get_field('latitude');
        $longitude = get_field('longitude'); 
        $phone = get_field('phone');
        ?>

        var card = 

        '<div class="card">'+
        '<div class="card-header"><?php echo $location_name; ?></div>'+
        '<div class="card-body">'+
         '<p class="card-text">Phone: <?php echo $phone; ?></div>'+
         '<a href="<?php echo get_the_permalink() ?>" class="btn btn-primary">Location Details</a>'+
        '</div>'
        '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: card,
        });
        
        var marker = new google.maps.Marker({
          position: { lat:<?php echo $latitude; ?>, lng: <?php echo $longitude; ?> },
          map,
          icon: image,
        });

        marker.addListener("click", () => {
          infowindow.open({
            anchor: marker,
            map,
            shouldFocus: false,
          });
        });

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
              initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
              map.setCenter(initialLocation);
            });
        }

  <?php 
      } // end while
      wp_reset_postdata();
    } // endif 
  ?>

}

window.onload = initMap;

thanks agin for all your help

• This reply was modified 3 years, 3 months ago by aaron4osu.

Thanks @bcworkz. where do I put window.onload = initMap; ? I tried right after the closing bracket from initMap() {...}

Here is the error
Unhandled Promise Rejection: InvalidValueError: initMap is not a function

here is the current script. I have a test marker in there as well. If I pull out the php post loop the map loads and the marker is there.

<script type="text/javascript">

  var mapStyles= [];

  function initMap() {

    <?php 
      $latitude = "39.18624"; 
      $longitude = "-74.53448";
      $centeredLatitude = "39.18624"; 
      $centeredLongitude = "-75.53448";
    ?> 

    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: { lat:<?php echo $centeredLatitude; ?>, lng: <?php echo $centeredLongitude; ?> },
      styles: mapStyles,
    });
    
    const image ="footer-fish-icon-110.png";

    var marker = new google.maps.Marker({
      position: { lat:<?php echo $latitude; ?>, lng: <?php echo $longitude; ?> },
      map,
      icon: image,
    });

    <?php 

      $args = array( 
        'orderby' => 'title',
        'order' => 'ASC',
        'post_type' => 'location', 
        'posts_per_page'=>-1
        );
      
      $locations = new WP_Query( $args );
   
      if( $locations->have_posts() ) {
        // looop through each location and create marker
        while( $locations->have_posts() ) {
          $location->the_post();
          $location_name = get_field('location_name');
          $latitude = get_field('latitude');
          $longitude = get_field('longitude');
          ?>

          var marker = new google.maps.Marker({
            position: { lat:<?php echo $latitude; ?>, lng: <?php echo $longitude; ?> },
            map,
            icon: image,
          });

    <?php 
        } // end while
      } // endif 
    ?>

  }

  window.onload = initMap;

</script>

here is the output

<script type="text/javascript">

  var mapStyles= [];

  function initMap() {

    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: { lat:39.18624, lng: -75.53448 },
      styles: mapStyles,
    });
    
    const image ="https://eatpokebros.com/wp-content/themes/poke-signal-theme/assets/img/footer-fish-icon-110.png";

    var marker = new google.maps.Marker({
      position: { lat:39.18624, lng: -75.53448 },
      map,
      icon: image,
    });

    var marker = new google.maps.Marker({
      position: { lat:39.18624, lng: -75.53448  },
      map,
      icon: image,
    });

    <!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width">
        <meta name='robots' content='noindex, follow' />
    <title>WordPress &rsaquo; Error</title>
    <style type="text/css">...</style>
</head>
<body data-rsssl=1 id="error-page">
    <div class="wp-die-message"><p>There has been a critical error on this website.</p><p><a href="https://www.ads-software.com/support/article/faq-troubleshooting/">Learn more about troubleshooting WordPress.</a></p></div></body>
</html>
    </script>

@bcworkz I rebuilt the init map function with the wordpress loop where the markers are being generated. I also updated the entire init map function with a current example from Google Maps API using the new google.maps.Marker() function. However I’m gettin getting this error
Unhandled Promise Rejection: InvalidValueError: initMap is not a function:

If I pull out everything inside the // get location posts and replace with a static new google.maps.Marke

var marker = new google.maps.Marker({
      position: { lat:<?php echo $centeredLatitude; ?>, lng: <?php echo $centeredLongitude; ?>  },
      map,
      icon: image,
    });

it works fine. So it seems like the init function doesn’t like being interrupted with the php loop? Any ideas?

Here is what I have now

 // center map around this location - hard coded for now. 
  $centeredLatitude = "39.18624"; 
  $centeredLongitude = "-75.53448";
?>     
<script type="text/javascript">

  var mapStyles= [];

  function initMap() {

  
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: { lat:<?php echo $centeredLatitude; ?>, lng: <?php echo $centeredLongitude; ?> },
      styles: mapStyles,
    });
    
    const image ="path-to-image.png";

   
    <?php 
      // get location posts
      $args = array( 
        'orderby' => 'title',
        'order' => 'ASC',
        'post_type' => 'location', 
        'posts_per_page'=>-1
        );
      
      $locations = new WP_Query( $args );
   
      if( $locations->have_posts() ) {
        // looop through each location and create marker
        while( $locations->have_posts() ) {
          $location->the_post();
          $location_name = get_field('location_name');
          $latitude = get_field('latitude');
          $longitude = get_field('longitude');
          ?>

         var marker = new google.maps.Marker({
           position: { lat:<?php echo $latitude; ?>, lng: <?php echo $longitude; ?> },
            map,
            icon: image,
          });

    <?php 
        } // end while
      } // endif 
       // end get location posts
    ?>

  }// end initMap()

</script>

`

• This reply was modified 3 years, 3 months ago by aaron4osu.
• This reply was modified 3 years, 3 months ago by aaron4osu.

Thanks @ashfame ! this might do exactly what I’m looking for. Can I access $seconddb and call the typical wordpress query for custom loops new WP_Query( $args )?

• This reply was modified 3 years, 3 months ago by aaron4osu.
• This reply was modified 3 years, 3 months ago by aaron4osu.

They said it couldn’t be done with the plugin, I was hoping someone in here would know of a workaround since I already paid for the plugin.