rebeccamantel
Forum Replies Created
-
Thank you so much for your reply!
This is the code for the map It is a .js filejQuery.noConflict();
(function ($) {function new_map($el) {
// var
var $markers = $el.find(‘.marker’);// vars
var args = {
zoom: 16,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{“featureType”:”administrative”,”elementType”:”labels.text.fill”,”stylers”:[{“color”:”#444444″}]},{“featureType”:”landscape”,”elementType”:”all”,”stylers”:[{“color”:”#f2f2f2″}]},{“featureType”:”poi”,”elementType”:”all”,”stylers”:[{“visibility”:”off”}]},{“featureType”:”poi”,”elementType”:”geometry.fill”,”stylers”:[{“color”:”#66101f”}]},{“featureType”:”road”,”elementType”:”all”,”stylers”:[{“saturation”:-100},{“lightness”:15}]},{“featureType”:”road.highway”,”elementType”:”all”,”stylers”:[{“visibility”:”simplified”}]},{“featureType”:”road.arterial”,”elementType”:”labels.icon”,”stylers”:[{“visibility”:”off”}]},{“featureType”:”transit”,”elementType”:”all”,”stylers”:[{“visibility”:”off”}]},{“featureType”:”water”,”elementType”:”all”,”stylers”:[{“color”:”#46bcec”},{“visibility”:”on”}]},{“featureType”:”water”,”elementType”:”geometry.fill”,”stylers”:[{“color”:”#013d41″}]},{“featureType”:”water”,”elementType”:”labels”,”stylers”:[{“hue”:”#00ff9e”},{“saturation”:”-100″},{“lightness”:”100″},{“gamma”:”10.00″}]}],};
// create map
var map = new google.maps.Map($el[0], args);// add a markers reference
map.markers = [];// add markers
$markers.each(function () {add_marker($(this), map);
});
// center map
center_map(map);// return
return map;}
function add_marker($marker, map) {
// var
var latlng = new google.maps.LatLng($marker.attr(‘data-lat’), $marker.attr(‘data-lng’));// create marker
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: ‘https://adrdev.com/wp-content/themes/adr/images/map.png’
});// add to array
map.markers.push(marker);// if marker contains HTML, add it to an infoWindow
if ($marker.html()) {
// create info window
var infowindow = new google.maps.InfoWindow({
content: $marker.html()
});// show info window when marker is clicked
google.maps.event.addListener(marker, ‘click’, function () {infowindow.open(map, marker);
});
}}
function center_map(map) {
// vars
var bounds = new google.maps.LatLngBounds();// loop through all markers and create bounds
$.each(map.markers, function (i, marker) {var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
bounds.extend(latlng);
});
// only 1 marker?
if (map.markers.length == 1) {
// set center of map
map.setCenter(bounds.getCenter());
map.setZoom(14);
} else {
// fit to bounds
map.fitBounds(bounds);
}}
var map = null;
$(document).ready(function () {
if ($(‘body.post-type-archive-properties’).length > 0 || $(‘body.page-template-page-leasing-php’).length > 0) {
$(‘input[name=”togglemap”]’).click(function () {
if ($(this).attr(‘value’) == ‘togglemap’) {
$(‘.property-map’).show();$(‘.nmr-map’).each(function () {
map = new_map($(this));
});$(‘.property-listing’).hide();
} else {
$(‘.property-map’).hide();
$(‘.property-listing’).fadeIn(10000);$(‘.nmr-map’).each(function () {
map = new_map($(this));
});window.location.reload();
}
});} else {
$(‘.nmr-map’).each(function () {
map = new_map($(this));
});
}});
})(jQuery);
and in the template i have
<div class=”col-lg-12″>
<hr>
<div class=”nmr-map”>
<div class=”marker sdgfsd” data-lat=”<?php echo $location[‘lat’]; ?>” data-lng=”<?php echo $location[‘lng’]; ?>”>
” class=”property-img”>
“>
<h4 style=”text-align: center”>” rel=”bookmark”><?php the_title(); ?></h4>
<p class=”address” style=”text-align: center”>
<?php $address = the_field(‘address’); if (! empty($address)) { echo $address + ‘,’; } ?>
<?php the_field(‘city’); ?>,
<?php the_field(‘state’); ?>,
<?php the_field(‘zip’); ?><br>
<?php echo “Price Per SF: $” . number_format(floatval($price_per_sf), 0); ?>
</p>
</div>
</div>
</div>