Post title and url not showing on google map marker

I have managed to show multiple markers but I can't show the post title and to make the same post title as URL to go to a single page.

Here is the code in functions.php

     $args = array('post_type' = 'post',array(
  'meta_query' = array(
    'relation' = 'AND',
    array(
      'key'   = 'lng',  
    ),
    array(
      'key'   = 'lat',  
    )
  )
));  
    $loop = new WP_Query($args);

while ( $loop-have_posts() ) : $loop-the_post();  

$title = get_the_title();
$post_category=get_the_category();
$post_category_name=$post_category[0]-cat_name;
$permalink=get_the_permalink();

$lng = get_post_meta( get_the_ID(), 'lng', TRUE ); 
$lat = get_post_meta( get_the_ID(), 'lat', TRUE ); 

$lnglat=$lng.",".$lat;

$arrlatlng[]=array(
    "lnglat"=$lnglat,
    "post_title"=$title,
    'post_category'=$post_category_name,
    'post_url'=$permalink);
$longitude[]=array('lng'=$lng);
$latitude[]=array('lat'=$lat);
endwhile;    
$passedValues = array( 'retrieve_data' = $retrieve_data, 
    'var1' = $arrlatlng,'lng'=$longitude,'lat'=$latitude
);
wp_localize_script( 'spektrum_gmap.js', 'passed_object', $passedValues );




    function myMap() {

        var myCenter = new google.maps.LatLng(44.794426, 20.451849);
         var mapProp = {center:myCenter, zoom:15, scrollwheel:false, draggable:true,
         mapTypeId:google.maps.MapTypeId.ROADMAP};
         var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 
         var myJsarray = passed_object.retrieve_data;

         var latitute = '' ;
         var longitute = '';



         var lng = passed_object.lng;
         var lat = passed_object.lat;
         var content=  passed_object.var1;
         var post_title=content.post_title


      for (var i=0; ilng.length; i++) {
      var marker=new google.maps.Marker({
        position: new google.maps.LatLng( lat[i].lat ,  lng[i].lng),
        map: map,
        title: content[i].post_title,
        url:content[i].post_url,
        content:content[i].post_title,
        label: {
          text: content[i].post_title,
          color: "#000",
          fontSize: "16px",
          fontWeight: "bold", 
        }
    });
}

      google.maps.event.addListener(marker, 'click', function() {
      window.location.href = this.url;
       });

  marker.setMap(map,content);

    }

Topic google-maps Wordpress javascript

Category Web


I have solved it by doing it like this.

function myMap() {

var gmarkers = [];
var markers = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});

    var myCenter = new google.maps.LatLng(44.794426, 20.451849);
     var mapProp = {center:myCenter, zoom:15, scrollwheel:false, draggable:true,
     mapTypeId:google.maps.MapTypeId.ROADMAP};
     var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 
     var myJsarray = passed_object.retrieve_data;

     var latitute = '' ;
     var longitute = '';



     var lng = passed_object.lng;
     var lat = passed_object.lat;
     var content=  passed_object.var1;
     var post_title=content.post_title


  for (var i=0; i<lng.length; i++) {
    console.log('data from database '+content[i].post_title);
  var marker=new google.maps.Marker({
    icon:icon,
    position: new google.maps.LatLng( lat[i].lat ,  lng[i].lng),
    map: map,
    title: content[i].post_title,
    url:content[i].post_url,
    content:content[i].post_title,
    category:content[i].post_category,
    label: {
      text: content[i].post_title,
      color: "#000",
      fontSize: "16px",
      fontWeight: "bold", 
    }
});

  gmarkers.push(marker);

// Marker click listener
google.maps.event.addListener(marker, 'click', (function (marker, content) {
    return function () { 
        infowindow.setContent(marker.title);
        infowindow.open(map, marker);
        map.panTo(this.getPosition());
        map.setZoom(15);
         window.location.href = marker.url;
    }
})(marker, content));

}

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.