Why is the second card not initializing?

Question

Hello! On several pages of my site there are a couple of maps with different coordinates, but with the same styles (+ in the first one there is an information window, in the second one it isn’t, but there is a marker). The essence of the problem is that the second card is not connected, although at first glance I did not find any detailed disassembling of errors in the code. I would be very grateful if you help to deal with this issue.

PS I don’t know why, but none of the maps work here at all. Please see the working example of this link at codepen.io

$(document).ready(function() { if ($('#map').length) { initialize(); } else if($('#object-map').length) { initialize_source_map('object-map'); }; }); var stylesArray = [{ "stylers": [ { "hue": "#0091ff" }, { "saturation": -50 }, { "lightness": 19 }, { "gamma": 0.53 } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "color": "#68a2cd" } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "color": "#adb4bb" } ] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "color": "#3e7cae" } ] } ]; function initialize() { var myLatlng = new google.maps.LatLng(34.893998, 33.611301); var mapOptions = { zoom: 12, center: myLatlng, scrollwheel: false, disableDefaultUI: true, styles: stylesArray }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); var image = 'img/marker-map.png'; var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: image }); var theElement = document.getElementById("address_content"); var contentString = theElement.innerHTML; var infowindow = new google.maps.InfoWindow({ content: contentString }); infowindow.open(map, marker); } function initialize_source_map(source) { var myLatlng = new google.maps.LatLng(34.893998, 33.611301); var mapOptions = { zoom: 12, center: myLatlng, scrollwheel: false, disableDefaultUI: true }; var map = new google.maps.Map(document.getElementById(source), mapOptions); var image = 'img/marker.png'; var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: image }); }

 html, body { height: 100%; margin: 0; padding: 0; } .contact-right { height: 45%; width: 100%; overflow: hidden; } #map { height: 100%; width: 100%; } .contact-right .content-map { overflow: visible !important; max-width: 260px; /*margin-bottom: 15px;*/ padding: 25px 25px 25px 30px !important; background: rgba(138, 165, 189, 0.9); -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); position: relative; color: #fff; font-size: 20px; line-height: 36px; } .contact-right .content-map:after { content: ''; position: absolute; top: 100%; right: 0; left: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 0 12px 12px 0; border-color: transparent #8aa5bd transparent transparent; } .second-map { width: 100%; height: 45%; margin-top: 5%; }

 <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnqeWjQxuCCKNSawsWyoncvxURVxjf8QM&"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="contact-right"> <div class="map" id="map"></div> <div id="address_content"> <div class="content-map"> <p>33 Makarious Avenue,<br> Frixos-Christiana Court,<br> office 32, Larnaca,<br> Cyprus 6017.</p> </div> </div> </div> <div class="second-map"> <div id="object-map"></div> </div>

HamSter HamSter 18k five 33 83 · Accepted Answer · 2016-11-04T12:06:50

Remove the ampersand at the end of the path https://maps.googleapis.com/maps/api/js?key=AIzaSyCnqeWjQxuCCKNSawsWyoncvxURVxjf8QM (for some reason, it slowed me down).
The condition of the presence of cards corrected.
Give height for the second card.

  $(document).ready(function() { if ($('#map').length) { initialize(); } if($('#object-map').length) { initialize_source_map('object-map'); }; }); var stylesArray = [{ "stylers": [ { "hue": "#0091ff" }, { "saturation": -50 }, { "lightness": 19 }, { "gamma": 0.53 } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "color": "#68a2cd" } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "color": "#adb4bb" } ] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "color": "#3e7cae" } ] } ]; function initialize() { var myLatlng = new google.maps.LatLng(34.893998, 33.611301); var mapOptions = { zoom: 12, center: myLatlng, scrollwheel: false, disableDefaultUI: true, styles: stylesArray }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); var image = 'img/marker-map.png'; var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: image }); var theElement = document.getElementById("address_content"); var contentString = theElement.innerHTML; var infowindow = new google.maps.InfoWindow({ content: contentString }); infowindow.open(map, marker); } function initialize_source_map(source) { var myLatlng = new google.maps.LatLng(34.893998, 33.611301); var mapOptions = { zoom: 12, center: myLatlng, scrollwheel: false, disableDefaultUI: true }; var map = new google.maps.Map(document.getElementById(source), mapOptions); var image = 'img/marker.png'; var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: image }); }

 html, body { height: 100%; margin: 0; padding: 0; } .contact-right { height: 45%; width: 100%; overflow: hidden; } #map, #object-map { height: 100%; width: 100%; } .contact-right .content-map { overflow: visible !important; max-width: 260px; /*margin-bottom: 15px;*/ padding: 25px 25px 25px 30px !important; background: rgba(138, 165, 189, 0.9); -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); position: relative; color: #fff; font-size: 20px; line-height: 36px; } .contact-right .content-map:after { content: ''; position: absolute; top: 100%; right: 0; left: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 0 12px 12px 0; border-color: transparent #8aa5bd transparent transparent; } .second-map { width: 100%; height: 45%; margin-top: 5%; }

 <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnqeWjQxuCCKNSawsWyoncvxURVxjf8QM"></script> <div class="contact-right"> <div class="map" id="map"></div> <div id="address_content"> <div class="content-map"> <p>33 Makarious Avenue,<br> Frixos-Christiana Court,<br> office 32, Larnaca,<br> Cyprus 6017.</p> </div> </div> </div> <div class="second-map"> <div id="object-map"></div> </div>

Thank you for the help Elena, it is not the first time you are helping out. I implemented your recommendations on the site, the following is coming out: the first map works as it should, the second one is displayed incorrectly.
you can see that it was initiated, but it looks like the following (link to the screen): prntscr.com/d2z58h The most interesting thing is that if you remove styles: stylesArray for the second map, it is displayed normally.
Although it is clear that it does not load outside the originally visible area: prntscr.com/d2z67r
I tried in the example from the question to add styles: stylesArray and everything works.
Yes, it works there, I also tried it ... Ok, thanks for the help

Grundy grundy 58.6k 7 49 93 · Answer 2 · 2016-11-04T11:49:50

The problem is that you initialize the second card only if you have not found the object for the first

 if ($('#map').length) { initialize(); } else if($('#object-map').length) { initialize_source_map('object-map'); };

For the solution, you need to remove the else .

In all likelihood, the problem is not only this - the removal of the else has led to the fact that the first map has also stopped being displayed ..

Why is the second card not initializing?

2 answers 2

More articles: