wordpress loop and multiple google maps getting errors in console - wordpress

Question

I'm trying to create a slide out box with 4 localisations shown on maps. Each localisation on one map.
I have created a custom post type with custom post fields lat and lng. I'm getting the custom post fields through
<?php
$args = array(
'post_type'=> 'localisations',
'posts_per_page' => 4,
'orderby' => 'date',
'order' => 'DESC',
);
query_posts($args);
if ( have_posts() ) :
while ( have_posts() ) : the_post();
$meta = get_post_meta( $post->ID, 'real_estate_location_details', true );
?>
In my next step I'm adding to div.mapholder an ID with increment using jQuery
jQuery(function($){
var i=0;
$('.mapholder').each(function(){
i++;
var newID='map'+i;
$(this).attr('id',newID);
$(this).val(i);
});
});
<div id="map-container">
<div class="mapholder"></div>
</div><!-- #map-container -->
and at the end I'm creating the map
function initialize() {
var latVariable = "<?php echo $meta['lat']; ?>";
var lngVariable = "<?php echo $meta['lng']; ?>";
var mapOptions = {
center: {lat: latVariable, lng: lngVariable},
zoom: 5
}
var map = new google.maps.Map(document.getElementById('map'+i), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
the console outputs some errors:
`You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.` - I think its because the increment in `var map new google.maps.Map(document.getElementById('map'+i), mapOptions);` doesn't work, but I don't know how to fix this.
Uncaught SyntaxError: Unexpected token new - Got this one. I was missing `=` between map and new
Could you please help me out whit this?

Answer 1

You have the issues because you are adding Google Api scripts inside of the loop - that is why they are getting loaded so many times and you have the error displayed.
It would be hard to present you with working example without being able to actually run it so please do not treat it as a final working solution but rather as a direction.
First of all you do not need this script which creates the IDs as it doesn't help in your scenario and it can be done easily while running PHP loop.
Second thing would be to change the way the callback is called on window load. By defining the function in the loop you are actually redefining it each time.
Third thing is to extract google API script outside of the loop.
Please find the code in this pastebin.
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5rsZHHAmzP_pOuHGKEUtarn2QideIyUM"></script>
<div id="real-estate-box" class="slideout">
<div class="real-estate-box-wrapper">
<p class="real-estate-box-title">For sale</p>
</div>
<div class="slideout-inner">
<?php
$args = array(
'post_type'=> 'real-estete',
'posts_per_page' => 4,
'orderby' => 'date',
'order' => 'DESC',
);
query_posts($args);
?>
<div class="see-all-real-estate col-xl-12">
<?php echo 'see all'; ?>
</div>
<ul>
<?php
$map_id = 1;
if ( have_posts() ) :
while ( have_posts() ) : the_post();
$meta = get_post_meta( $post->ID, 'real_estate_location_details', true );
?>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var map new google.maps.Map(document.getElementById('map-<?= $map_id ;?>'), {
center: {
lat: "<?= $meta['lat']; ?>",
lng: "<?= $meta['lng']; ?>"
},
zoom: 5
});
});
</script>
<li class="col-xl-3">
<a class="real-estate-title" href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a><!-- .real-estate-title -->
<div id="map-container">
<div class="mapholder" id="map-<?= $map_id ;?>"></div>
</div><!-- #map-container -->
see more
</li><!-- .col-xl-4 -->
<?php
$map_id++;
endwhile; ?>
</ul>
<?php
else:
echo '<p class="no-real-estete">We don\'t have any real estates for sale on the moment</p>';
endif;
?>
</div>
</div>
https://pastebin.com/5Tz9Ueaa
Actually I would strongly recommend going in completely other direction with your code as you will have some issues with that approach.
Nevertheless code form pastebin should work in your case.