trouble getting my mouseover on markers to work

Question

I have created my code below with the mouseover affect at the end, but it does not work. Have I put it in the wrong place? I just can't seem to get it to work. Eventually I would like to get a certain type of info displayed on them but each step at a time, trying to get the basic to work first.

<!DOCTYPE html>
<html>

<head>



<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">    

  //declare namespace
  var up206b = {};

  //declare map
  var map;

  function trace(message) 
  {
    if (typeof console != 'undefined') 
    {
      console.log(message);
    }
  }

  up206b.initialize = function()
  {
    var latlng = new google.maps.LatLng(52.136436, -0.460739);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  var geocoder = new google.maps.Geocoder();

  up206b.geocode = function() 
  {

    var addresses = [ $('#address').val(), $('#address2').val()];

    addresses.forEach(function(address){
      if(address){
      geocoder.geocode( { 'address': address}, function(results, status) 
                       {
        if (status == google.maps.GeocoderStatus.OK) 
        {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
          });
        } 
        else 
        {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
      }
    });
  }

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

var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
          });


marker.addListener('mouseover', function() {
infowindow.open(map, this);
});


marker.addListener('mouseout', function() {
infowindow.close();
});

</script> 
</head>
 <body onload="up206b.initialize()"> 

 <div style="top: 0; right: 0; width:380px; height: 500px; float:right;padding-left:10px; padding-right:10px;"> 
  <h1 align="center">Map Search</h1>   

  <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >

   <form >
    <br>
    Location 1 <input type="text" id="address">
    <br>
    <br>
    Location 2 
    <input type="text" id="address2">
    <br>
    <br>
    <input type="button" value="Submit" onClick="up206b.geocode()">
  </form>
  </div>

</div> 

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>

Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue. I get a javascript with the posted code: `Uncaught ReferenceError: contentString is not defined` — geocodezip, Feb 19 '16 at 21:23
I have added the rest of my work that will give you a working script, Just doesn't have any mouseovers that i want — Kev, Feb 19 '16 at 21:34
It won't have any mouseovers until you define `contentString`, that is the content displayed in the infowindow, if it is empty/null, no infowindow... — geocodezip, Feb 19 '16 at 23:04

score 0 · Accepted Answer · edited May 23 '17 at 11:45

You need to:

define contentString
associate the marker with the infowindow content. One way of doing that is with anonymous function closure as in this related question Google Maps JS API v3 - Simple Multiple Marker Example, or with an explicit createMarker function as in my example below.

Note: This approach will only work for approximately 10 addresses, after which it will run into the Geocoder rate limits.

function createMarker(latlng, html, map) {
  var infowindow = new google.maps.InfoWindow({
    content: html
  });
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  marker.addListener('mouseover', function() {
    infowindow.open(map, this);
  });
  marker.addListener('mouseout', function() {
    infowindow.close();
  });
}

proof of concept fiddle

code snippet:

var markers = [];

function createMarker(latlng, html, map) {
  var infowindow = new google.maps.InfoWindow({
    content: html
  });
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  marker.addListener('mouseover', function() {
    infowindow.open(map, this);
  });
  marker.addListener('mouseout', function() {
    infowindow.close();
  });
  markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
  if (typeof console != 'undefined') {
    console.log(message);
  }
}

up206b.initialize = function() {
  var latlng = new google.maps.LatLng(52.136436, -0.460739);
  var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
  var bounds = new google.maps.LatLngBounds();
  var addresses = [$('#address').val(), $('#address2').val()];

  addresses.forEach(function(address) {
    if (address) {
      geocoder.geocode({
        'address': address
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          createMarker(results[0].geometry.location, address, map);
          bounds.extend(results[0].geometry.location);
          map.fitBounds(bounds);
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  });
}

google.maps.event.addDomListener(window, "load", up206b.initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="address" value="New York, NY" />
<input id="address2" value="Newark, NJ" />
<input type="button" value="Submit" onClick="up206b.geocode()">
<div id="map_canvas"></div>

trouble getting my mouseover on markers to work

1 Answers1