Display info window on Google Map

I have an embedded Google Map at www.mauitradewinds.com/location.htm    Hovering the mouse over the marker, or clicking the marker, should open an infowindow, but it does not.  Can you fix this?

extinfowindow.js
map.js
LVL 1
ddantesAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
Hi, please fix this error first:

You have included the Google Maps API multiple times on this page.
so you need to called it only one.


maps?file=api&v=2&key=AIzaSyAEd140ef2UHZgfgkL0lcYFt-IhNVZbpmk:96 
You have included the Google Maps API multiple times on this page. 
This may cause unexpected errors.
gh @ maps?file=api&v=2&key=AIzaSyAEd140ef2UHZgfgkL0lcYFt-IhNVZbpmk:96

Open in new window


see the Google map script are in these file
js/js.js
js/map.js

(by the way it's not very intuitive to called this file js you can rename it to gmap )
and choose the one you want to keep

some warnings :
Map.addControl is no longer supported in the Google Maps Javascript API v2. Please visit https://developers.google.com/maps/documentation/javascript/v2/v2tov3 to migrate your application to v3.
H @ maps?file=api&v=2&key=AIzaSyAEd140ef2UHZgfgkL0lcYFt-IhNVZbpmk:173

Open in new window


Control is no longer supported in the Google Maps Javascript API v2. Please visit https://developers.google.com/maps/documentation/javascript/v2/v2tov3 to migrate your application to v3.
H @ maps?file=api&v=2&key=AIzaSyAEd140ef2UHZgfgkL0lcYFt-IhNVZbpmk:173

Open in new window


js.js:8 A Parser-blocking, cross site (i.e. different eTLD+1) script, https://maps.gstatic.com/maps-api-v3/api/js/19/4/main.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message.
getScript @ js.js:8

Open in new window

ddantesAuthor Commented:
Thank you.  I saw those warnings in the Google Development Console, but I didn't remember that js.js was a map script.  I must have used it years ago, with an earlier version of the map, and never expunged it.  I've made the corrections.

Not sure what to do about the "Control" and "addControl" warnings.  I removed them from the map scripts, and everything which worked before still seems to work.
lenamtlCommented:
You can update your code and use Google map v3 instead of v2.
This will also allow to use new features and use more up to date version

Here are the code I usually use depending of the complexity and needs

You can use this scripts as it is one of the most used in template
http://hpneo.github.io/gmaps/
https://github.com/hpneo/gmaps

http://labs.mario.ec/jquery-gmap/
https://github.com/marioestrada/jQuery-gMap

More complex
http://leafletjs.com/
https://github.com/Leaflet/Leaflet

http://maplacejs.com/
https://github.com/danielemoraschi/maplace.js
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

ddantesAuthor Commented:
Thank you for those links.  Before I undertake an upgrade project, I'd like to simply get the info window to open with mouse over, or click on the marker.  Can you kindly supply code for that which I can insert in map.js?
lenamtlCommented:
Can you try to add
this code

in your map.js after the line
map.addOverlay(marker);

Open in new window

     
var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
            '<div id="bodyContent">'+
            '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
            'sandstone rock formation in the southern part of the '+
            'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
            'south west of the nearest large town, Alice Springs; 450&#160;km '+
            '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
            'features of the Uluru - Kata Tjuta National Park. Uluru is '+
            'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
            'Aboriginal people of the area. It has many springs, waterholes, '+
            'rock caves and ancient paintings. Uluru is listed as a World '+
            'Heritage Site.</p>'+
            '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
            'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
            '(last visited June 22, 2009).</p>'+
            '</div>'+
            '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

Open in new window


If this is working you just need to adapt the content text

I have create a JSfiddle so you can see the result
https://jsfiddle.net/lenamtl/g47uk5d9/
ddantesAuthor Commented:
map.js

Thank you.  I implemented that (revised code attached).  Unfortunately, nothing happens when I hover over the marker or click it, except that the cursor changes, showing that there is a link.  (This already happened, before adding code from your last comment).
lenamtlCommented:
Ok I saw that you have ExtInfoWindow script, so let me check it I'll get back to you asap
ddantesAuthor Commented:
Thank you lenamtl
lenamtlCommented:
Could you replace the map.js with the one attached to you latest message so I can see online?
(keep a bakup of the  actual map.js)

These are really old code 2007....

or what you can tried is to remove this from the page
<script src="js/map.js" type="text/javascript"></script>
<script src="js/extinfowindow.js" type="text/javascript"></script> 

Open in new window

and tried the code I provide in JSfiddle (change the lat lon) to see if this is working
https://jsfiddle.net/lenamtl/g47uk5d9/
ddantesAuthor Commented:
I had replaced the map.js online with the one attached to my previous message.  Sorry I didn't specify that in my comment.

I removed the two obsolete js references from html in location.htm

I tried the fiddle you posted, and it works.  I didn't see that you wanted me to replace map.js with the fiddle, however, so I have not done so.
lenamtlCommented:
Ok if it's working with the code from Jsfiddle work, then don't use the obsolete Js file.
You will only need to change the long lat and map setting in
function initMap 

Open in new window

and the text of the info box in  
var contentString

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ddantesAuthor Commented:
Chrome Console report Thank you.  I've edited and uploaded the revised pages.  The infowindow works now, except the map appears blank much of the time.   The map may appear if I refresh the page, or it may load initially, and then disappear if the page is refreshed.  This happens with Internet Explorer 11, Firefox, Google Chrome, iPad and iPhone.  Can you have a look at www.mauitradewinds.com/location2.htm  and www.mauitradewinds.com/m_location2.htm   and see if there is a reason for that behavior (Console report attached)?  If the map loads, the console reports no errors, but when it does not load, the errors shown are reported.
(Note:  I named the pages which are still in process as "location2.htm" and "m_location2.htm" , along with map2.js and m_map2.js,  and restored previous versions of location pages to my website as location.htm with map.js, and m_location.htm with m_map.js, so visitors will be able to load the map -- even though it won't have a working infowindow).
lenamtlCommented:
Hi, I cannot reproduce the problem about the page refresh this is working fine on my side.
You may have Internet problem.?

Everything is working fine on
http://www.mauitradewinds.com/location2.htm

About the the JS error in console I see on
http://www.mauitradewinds.com/m_location2.htm
Icon is not defined so this is probably block the rest of the script
so you have to fix this first then you should be able to have working map with infobox

You can try this
var marker = new google.maps.Marker({
    map: map,
    position: point
  });

Open in new window


Anyhow as it is working fine on
http://www.mauitradewinds.com/location2.htm
if you copy the same code and bothe file are at the same level both should work the same
you probably made a code mistake...

Use the one that is working :)
ddantesAuthor Commented:
Thank you.  I decided to eliminate the infowindow on m_location2.htm because it occupies too much space on a smart phone screen.

I appreciate your assistance, and I'm going to close the question.  The issue of a blank map is still happening, but I'll post a new question if I decide to pursue a solution.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.