There are a few setups to achieve a google map on WordPress site that have multiple markers on the map using latitude and longitude. So let’s start step by step.
function get_ajax_zip_locations(){
$zipCode = isset( $_GET[‘zipCode’] ) ? $_GET[‘zipCode’] : ”;
$locations = array();
$args = array(
‘post_type’ => ‘stores’,
‘order’ => ‘DESC’,
);
if( $zipCode ) {
$args[‘meta_key’] = ‘zip_code’;
$args[‘meta_value’] = $zipCode;
$args[‘posts_per_page’] = 3;
}
else {
$args[‘posts_per_page’] = -1;
}
$the_query = new WP_Query( $args );
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ) : $the_query->the_post();
$locations[] = array(
‘title’ => get_the_title(),
‘phn’ => get_field(‘phone_number’),
‘store_link’ => get_the_permalink(),
‘LatitudeLongitude’ => get_field(‘google_map’)[‘lat’] . “, ” . get_field(‘google_map’)[‘lng’],
‘Address’ => get_field(‘google_map’)[‘address’]
);
endwhile;
endif;
wp_reset_query();
echo json_encode($locations);
die;
}
add_action(‘wp_ajax_get_ajax_zip_locations’, ‘get_ajax_zip_locations’);
add_action(‘wp_ajax_nopriv_get_ajax_zip_locations’, ‘get_ajax_zip_locations’);
var map;
var geocoder;
var marker;
var latlng;
var infowindow;
var bounds;
let latitude = 60.7922;
let longitude = -161.7558;
function display_google_map( data ) {
bounds = new google.maps.LatLngBounds();
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(“googleMapCanvas”), mapOptions);
console.log(“data: ” , data);
// DATA FORMAT
// var content = ‘[{ “ADDRESS”: “Jamiya Nagar Kovaipudur Coimbatore-641042”, “LatitudeLongitude”: “10.9435131,76.9383790”, “MarkerId”: “Customer” },{ “ADDRESS”: “Coimbatore-641042”, “LatitudeLongitude”: “11.0168445,76.9558321”, “MarkerId”: “Customer”}]’;
if( data.length > 0 ) {
for (var i = 0; i < data.length; i++) {
setMarker(data[i]);
}
}
/* Set zoom level */
var boundsListener = google.maps.event.addListener((map), ‘bounds_changed’, function(event) {
this.setZoom(5);
google.maps.event.removeListener(boundsListener);
});
}
function setMarker(item) {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow({ maxWidth: 250 });
if ((item[“LatitudeLongitude”] == null) || (item[“LatitudeLongitude”] == ‘null’) || (item[“LatitudeLongitude”] == ”)) {
geocoder.geocode({ ‘address’: item[“Address”] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
bounds.extend(latlng);
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: false,
html: item[“Address”],
// icon: “images/marker/” + item[“MarkerId”] + “.png”
});
marker.setPosition(latlng);
map.setCenter(latlng);
google.maps.event.addListener(marker, ‘click’, function(event) {
infowindow.setContent(this.html);
infowindow.setPosition(event.latLng);
infowindow.open(map, this);
});
map.fitBounds(bounds);
}
else {
alert(item[“Address”] + “. This address couldn’t be found”);
}
});
}
else {
var latlngStr = item[“LatitudeLongitude”].split(“,”);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
latlng = new google.maps.LatLng(lat, lng);
bounds.extend(latlng);
const contentString = `<div id=”content”>
<h1 id=”diaHeading” class=”diaTitle”>${item.title}</h1>
<div id=”bodyContent”>
<address>${item.Address}</address>
<p class=”diaPhone”>Phone: ${item.phn}</p>
</div>
</div>`;
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: false,
//icon: “images/marker.png”, // Give ur own image
content: contentString
});
marker.setPosition(latlng);
map.setCenter(latlng);
google.maps.event.addListener(marker, ‘click’, function(event) {
infowindow.setContent(this.content);
infowindow.setPosition(event.latLng);
infowindow.open(map, this);
});
map.fitBounds(bounds);
}
}