Embedded Google Maps shows wrong company on hover - google-maps

Question

I'm experiencing an very annoying problem with Google Maps. When I embed Google Maps for my company it shows another unrelated company in a white pop-over when I hover the label on the map. When I click my company label (the red company name on the map) it switches the address inside the white box in the upper left to that company but does not move the map pointer.
At first, when my company name was slightly different the other company was a company in India with a name that was similar and was also a webdesign agency. In the meanwhile I had slightly changed the displayed company name in Google Places. Now the change has been adopted by Google Maps and the issue persists. Only this time it is showing another company, in the UK, also a webdesign agency, the name is not similar.
To further clarify my issue I have attached screenshots.
I hover over my company label, the white popover shows the unrelated company name. (Screenshot 1)
I click 'my company label' (Screenshot 1)
The view changes to that in screenshot 2.
Note that this issue only occurs when Google Maps is embedded and set to point to my company.
I have already reported this issue to Google two weeks ago but I didn't receive any response yet.
Screenshot 1 (The state when hovering my company label)
Screenshot 2 (The state when company label has been clicked)
I am aware of the fact that stackoverflow is no customer service for Google but I am wondering if anyone else has experienced this issue as well. In case the issue is just a bug and I just have to wait for a fix, I would like to know if anyone has a workaround for this as it is quite embarrassing that Google Maps shows another company when you hover my company. Especially because the other company is also in the business of webdesign.

Answer 1

What's happening: Your code asks google to search your company ... and something goes wrong.
If you only have 1 marker, obviously you (the programmer) search the location (1 time), and you put it in your code.
Then you will never see that Indian company anymore.
Here is a simple example of a map, a marker and an infoWindow.
Is this what you want? Can you take it from here?
Any feature that's missing?
EDIT: oh yes ... I used a 'click' on line 31. You can change 'click' by 'mouseover'; then the infowindow is shown when hovering.
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<script type="text/javascript">
// making the map. Initialization
function initialize() {
// company location:
var companyLocation = {lat: 52.0400564, lng: 4.3483506};
// company logo:
var urlCompanyLogo = 'https://lh3.googleusercontent.com/-ON8pWapB8Ro/AAAAAAAAAAI/AAAAAAAAAGo/wiwqSbfDyxg/s60-p-rw-no/photo.jpg';
// content of the infowindow
var companyDetails = ' <img class="logo" src="' + urlCompanyLogo + '"> <h3>Kermit industries</h3> Retrieving any golf ball from the pond';
// the map
var map = new google.maps.Map(document.getElementById('map'), {
center: companyLocation,
mapTypeId: google.maps.MapTypeId.HYBRID,
zoom: 18
});
// the marker
var marker = new google.maps.Marker({
position: companyLocation,
map: map,
title: 'Kermit industries'
});
// the infowindow
var infowindow = new google.maps.InfoWindow({
content: companyDetails,
position: companyLocation,
map: null // first set it to null, only show it after a click on the marker
});
// when the user clicks on the marker, the infowindow will appear
marker.addListener('click', function() {
infowindow.setMap(map);
});
}
// this will lauch the initialization once the page is loaded
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map {
height: 500px;
}
.gm-style-iw .logo{
float: right;
}
</style>
<div id="map"></div>