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 questionI 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);
}
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 questionI 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);
}
- 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
1 Answer
Reset to default 0I 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));
}