Display info window on Google Map

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

Select allOpen 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

Select allOpen 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

Select allOpen 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

Select allOpen in new window

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.

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

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?

Can you try to add
this code

in your map.js after the line

map.addOverlay(marker);

Select allOpen 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
        });

Select allOpen 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/

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).

Ok I saw that you have ExtInfoWindow script, so let me check it I'll get back to you asap

Thank you lenamtl

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> 

Select allOpen 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/

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.

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).

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
  });

Select allOpen 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 :)

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.