While using the Google Maps API, I encountered a challenge with making a "card" appear instead of a tooltip or infobox when clicking on a marker. After following the guidance provided here, I was able to display the card. However, the method involved appending a large string containing hardcoded HTML for a white box with fixed information and links.
In an effort to enhance this functionality, I attempted to modify the code to dynamically insert desired information. By simplifying the card's content to just show a grey box upon marker click, you can view my progress here.
The crucial section of the code is:
google.maps.event.addDomListener(marker, 'click', function() {
// Prevents card from being added more than once (e.g., during page resize)
if ( $( ".place-card" ).length === 0 ) {
var rootDiv = document.createElement('div');
rootDiv.style = ('position', 'absolute');
rootDiv.style = ('right', '0px');
rootDiv.style = ('top', '0px');
var secondDiv = document.createElement('div');
secondDiv.style = ('margin', '10px');
secondDiv.style = ('padding', '1px');
secondDiv.style = ('-webkit-box-shadow', 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px');
secondDiv.style = ('box-shadow', 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px');
secondDiv.style = ('border-radius', '2px');
secondDiv.style = ('background-color', 'white');
secondDiv.style = ('width', '200px');
secondDiv.style = ('height', '150px');
rootDiv.appendChild(secondDiv);
// Attempted methods to append the new div elements
// $(".gm-style").append(rootDiv);
// $(".gm-style").append('<div style="position: absolute; right: 0px; top: 0px;"><div style="margin: 10px; padding: 1px; -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; border-radius: 2px; background-color: white; width: 200px; height: 150px"></div></div>');
}
});
(My attempts to replace str2 with actual div elements have not been successful so far. Omitting the use of String() did not yield positive results either). Is there a more effective way to create and display this card rather than concatenating strings together?
Can someone clarify the purpose of $(".gm-style")? Although it seems to serve as an alternative to document.getElementById, my numerous efforts to find a suitable substitute resulted in errors since .gm-style represents a class name. Any insights would be appreciated.
Thank you!