কোনও প্লাগইন ছাড়াই এটি করতে পারেন , আপনার কেবলমাত্র Google মানচিত্র এপিআই দরকার ।
দয়া করে নোট করুন যে আপনি যদি কোনও একক পৃষ্ঠায় 20 মার্কার বা তার বেশি কিছু রাখার পরিকল্পনা করেন তবে আপনাকে স্থানাঙ্ক ব্যবহার করে পোস্টগুলি জিওলোক্যাট করতে হবে, ঠিকানাগুলি নয়।
কোনও ঠিকানা থেকে স্থানাঙ্কগুলি সংরক্ষণ করতে আপনি করতে পারেন:
- (ভালো কিছু নিজে একটি পরিষেবা ব্যবহার এই )
- আপনি পোস্ট তৈরি বা আপডেট করার সময় ডাব্লুপি অ্যাডমিন থেকে গুগল মানচিত্রের জিওকোডিং কল করুন
দ্বিতীয় বিকল্পটি কীভাবে প্রয়োগ করা যায় তা প্রশ্নের সাথে কঠোরভাবে সম্পর্কিত নয় এবং আমি আমার উত্তরের জন্য এটি আমলে নেব না, তবে কোনও ঠিকানা থেকে স্থানাঙ্কগুলি পুনরুদ্ধার করা কতটা সহজ তা দেখতে এই মানচিত্রের এপিআই উদাহরণটি দেখুন।
তাই আমি এই উত্তর পোস্ট একটি কাস্টম ক্ষেত্র 'coords কোথায় স্থানাঙ্ক সংরক্ষণ করা হয় দুটি কমা একটি স্ট্রিং মান পৃথক মত someting আছে অনুমান করা হবে: '38.897683,-77.03649'।
আমি এটিও ধরে নিয়েছি যে 'পেজ-গুগল-ম্যাপ.এফপি' ফাইলটিতে একটি পৃষ্ঠা টেম্পলেট সংরক্ষিত আছে।
নিম্নলিখিত কোড রাখুন 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থিমটির 'জেএস' সাবফোল্ডারে অবস্থিত একটি স্ক্রিপ্ট
এছাড়াও, পোস্টগুলি লুপ করে, আমি একটি অ্যারে $map_dataতৈরি wp_localize_scriptকরি এবং ব্যবহার করে আমি পৃষ্ঠাটিতে জেএসে এই অ্যারেটি পাস করি।
এখন, এতে 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 );
জাভাস্ক্রিপ্টটি ডাব্লুপি সম্পর্কিত নয়, এবং আমি কেবল বর্ণের ব্যবহার দেখানোর জন্য এখানে রেখেছি map_data। আমি কোনও জেএস বিকাশকারী নই এবং কোডটি কমবেশি পুরোপুরি এখান থেকে নেওয়া হয়েছে
এখানেই শেষ. স্রেফ পৃষ্ঠার টেম্পলেটটি তৈরি করুন এবং আইডি 'ম্যাপ' দিয়ে একটি ডিভ sertোকান, এরকম কিছু:
<div id="map" style="width:100%; height:100%"></div>
অবশ্যই ডিভ সিএসএস দিয়ে স্টাইল করা যেতে পারে এবং নোট করুন যে চিহ্নিতকারীগুলির তথ্য উইন্ডোগুলিও স্টাইল করা যেতে পারে: সিএসএসে h3.marker-titleতথ্য উইন্ডো শিরোনামকে div.marker-descস্টাইল করতে এবং বিষয়বস্তু স্টাইল করতে।
মনে রাখবেন মানচিত্র কেন্দ্রটি স্বয়ংক্রিয়ভাবে গণনা করা হয়েছে এবং আপনি যদি ডিফল্ট জুম পরিবর্তন করতে চান তবে আপনাকে মানচিত্র পৃষ্ঠার টেমপ্লেটে নির্ধারিত পৃষ্ঠায় একটি কাস্টম ক্ষেত্র 'মানচিত্র_জুম' রাখতে হবে।
আশা করি এটা সাহায্য করবে.