किसी भी प्लगइन के बिना ऐसा कर सकते हैं , आपको केवल Google मैप्स एपीआई की आवश्यकता है ।
कृपया ध्यान दें कि यदि आपके पास एक पृष्ठ पर 20 मार्कर या अधिक करने की योजना है, तो आपको निर्देशांक और पते का उपयोग करके पोस्ट को जियोलोकेट करना होगा।
एक पते से निर्देशांक को बचाने के लिए:
- मैन्युअल रूप से एक सेवा का उपयोग करें (कुछ इस तरह )
- जब आप पोस्ट बनाते हैं या अपडेट करते हैं तो WP व्यवस्थापक से Google नक्शे को जियोकोडिंग कहें
दूसरे विकल्प को कैसे लागू किया जाए, यह सवाल से कड़ाई से संबंधित नहीं है, और मैं इसे अपने जवाब के लिए ध्यान में नहीं रखूंगा, लेकिन एक मैप से एपीआई को उदाहरण के लिए देखने के लिए कितना सरल है यह देखने के लिए यह मैप्स एपीआई उदाहरण देखें।
तो मैं इस उत्तर में मानूंगा कि पदों में एक कस्टम फ़ील्ड 'कोऑर्डर्स' है जहाँ निर्देशांक दो कॉमा अलग किए गए मानों की एक स्ट्रिंग के रूप में संग्रहीत किए जाते हैं, जैसे कुछ '38.897683,-77.03649':।
मैं यह भी मानता हूं कि 'पेज-google-map.php' फ़ाइल में एक पेज टेम्प्लेट सहेजा गया है।
में निम्नलिखित कोड डालें functions.php
add_action( 'wp_enqueue_scripts', 'enqueue_gmap' );
function enqueue_gmap() {
// script goes only in the map page template
if ( ! is_page_template('page-google-map.php') ) return;
wp_register_script( 'google-maps-api', '//maps.google.com/maps/api/js?sensor=false', false, false );
wp_register_script( 'posts_map', get_template_directory_uri().'/js/mygmap.js', false, false, true );
wp_enqueue_script( 'google-maps-api' );
wp_enqueue_script( 'posts_map' );
// use a custom field on the map page to setup the zoom
global $post;
$zoom = (int) get_post_meta( $post->ID, 'map_zoom', true );
if ( ! $zoom ) $zoom = 6;
$map_data = array(
'markers' => array(),
'center' => array( 41.890262, 12.492310 ),
'zoom' => $zoom,
);
$lats = array();
$longs = array();
// put here your query args
$map_query = new WP_Query( array( 'posts_per_page' => -1, ) );
// Loop
if ( $map_query->have_posts() ) :
while( $map_query->have_posts() ) : $map_query->the_post();
$meta_coords = get_post_meta( get_the_ID(), 'coords', true );
if ( $meta_coords ) {
$coords = array_map('floatval', array_map( 'trim', explode( ",", $meta_coords) ) );
$title = get_the_title();
$link = sprintf('<a href="%s">%s</a>', get_permalink(), $title);
$map_data['markers'][] = array(
'latlang' => $coords,
'title' => $title,
'desc' => '<h3 class="marker-title">'.$link.'</h3><div class="marker-desc">'.get_the_excerpt().'</div>',
);
$lats[] = $coords[0];
$longs[] = $coords[1];
}
endwhile;
// auto calc map center
if ( ! empty( $lats ) )
$map_data['center'] = array(
( max( $lats ) + min( $lats ) ) /2,
( max( $longs ) + min( $longs ) ) /2
);
endif; // End Loop
wp_reset_postdata;
wp_localize_script( 'posts_map', 'map_data', $map_data );
}
जैसा कि आप देख सकते हैं, मैप पेज टेम्प्लेट में, मैं एनक्यू
- गूगल मानचित्र एपीआई स्क्रिप्ट
- एक स्क्रिप्ट जिसे
mygmap.jsविषय के 'js' सबफ़ोल्डर में स्थित कहा जाता है
इसके अलावा, पोस्ट को लूप करते हुए, मैं एक ऐरे को पॉप्युलेट करता हूं $map_dataऔर wp_localize_scriptपेज में js को इस ऐरे को पास करता हूं।
अब, mygmap.jsशामिल होंगे:
function map_initialize() {
var map_div = document.getElementById( 'map' );
map_markers = map_data.markers,
map_center = new google.maps.LatLng( map_data.center[0], map_data.center[1] ),
map_zoom = Number( map_data.zoom ),
map = new google.maps.Map( document.getElementById( 'map' ), {
zoom : map_zoom,
center : map_center,
mapTypeId : google.maps.MapTypeId.ROADMAP
} );
if ( map_markers.length ) {
var infowindow = new google.maps.InfoWindow(),
marker,
i;
for ( i = 0; i < map_markers.length; i++ ) {
marker = new google.maps.Marker( {
position : new google.maps.LatLng(
map_markers[i]['latlang'][0],
map_markers[i]['latlang'][1]
),
title : map_markers[i]['title'],
map : map
} );
google.maps.event.addListener( marker, 'click', ( function( marker, i ) {
return function() {
infowindow.setContent( map_markers[i]['desc'] );
infowindow.open( map, marker );
}
} )( marker, i ) );
}
}
};
google.maps.event.addDomListener( window, 'load', map_initialize );
जावास्क्रिप्ट WP संबंधित नहीं है, और मैं यहां केवल map_datavar का उपयोग दिखाने के लिए डाल रहा हूं । मैं js डेवलपर नहीं हूँ और कोड कमोबेश पूरी तरह से यहाँ से लिया गया है
बस इतना ही। बस पेज टेम्प्लेट बनाएं और आईडी 'मैप' के साथ एक div डालें, कुछ इस तरह:
<div id="map" style="width:100%; height:100%"></div>
बेशक div को css के साथ स्टाइल किया जा सकता है, और ध्यान दें कि मार्करों की जानकारी विंडो को भी स्टाइल किया जा सकता है, भी: css उपयोग h3.marker-titleमें जानकारी विंडो शीर्षक और div.marker-descसामग्री को स्टाइल करने के लिए।
ध्यान दें कि मानचित्र केंद्र की गणना स्वचालित रूप से की जाती है और यदि आप डिफ़ॉल्ट ज़ूम को बदलना चाहते हैं तो आपको पृष्ठ पृष्ठ टेम्पलेट को सौंपे गए पृष्ठ में एक कस्टम फ़ील्ड 'map_zoom' डालनी होगी।
आशा है ये मदद करेगा।