javascript - Post title and url not showing on google map marker

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

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; i<lng.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);

    }

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

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; i<lng.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);

    }

• javascript
• google-maps

Share Improve this question edited Jan 4, 2019 at 22:43 fuxia♦ 107k3939 gold badges255255 silver badges461461 bronze badges asked Dec 25, 2018 at 12:29 bodyhammerbodyhammer 133 bronze badges 5

• Welcome to WPSE, bodyhammer. Your questions here should be specific to WordPress. This question really belongs on another site such as stackoverflow – butlerblog Commented Dec 25, 2018 at 13:12
• Hello, this is a question about the WordPress, I'm having trouble of posting the post title and URL to a single page of WordPress. – bodyhammer Commented Dec 25, 2018 at 13:29
• It makes more sense with your additional code. – butlerblog Commented Dec 25, 2018 at 16:09
• Yes, at first I didn't want to put my PHP code because I have no problem with that, only with JS. I have edited my code once again since I have found a way to show the post titles on markers but the URL is still making a problem. label: { text: content[i].post_title, //edited color: "#000", fontSize: "16px", fontWeight: "bold", } – bodyhammer Commented Dec 25, 2018 at 16:21
• You should always post code that is relevant to your question. In this case, while the problem may be with the JS, the PHP is relevant - especially so it's obvious to the WP portion of your question. – butlerblog Commented Dec 25, 2018 at 16:59

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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));

}