Single InfoWindow variable creation (custom icons and marker clusterer) [duplicate]

StackOverflow https://stackoverflow.com/questions/23118992

Question

I tried asking this earlier and may have been confusing in my writing. I currently have 30 infowindows created that are attached to each marker. What can I do in the code below to change that? Would I have to tinker with variable names? I also have my information sorted out by each icon/marker. Have an example(which is missing my clusters). I also do not want to mess up my icons either.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=???&sensor=true">
 </script>
<script type="text/javascript" src="http://google-maps-utility-library-    v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript">
 function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(39.8282, -98.5795),
      zoom: 4
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
var mcOptions = {gridSize: 50, maxZoom: 15};

  var arizona = 'image link';
   var arizonaLatLng = new google.maps.LatLng(33.44528, -112.06694);
   var arizonamarker = new google.maps.Marker({
  position: arizonaLatLng,
  map: map,
  icon: arizona,
  title: 'Arizona Diamondbacks'
     }); 
var arizonaString =  '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">Arizona Diamondbacks</h1>'+
  '<div id="bodyContent">'+
  '<p><a href=https://www.google.com/maps/place/Chase+Field/@33.446313,-112.06668,18z/data=!3m1!4b1!4m2!3m1!1s0x872b11f5f3e35ef1:0x7278068b96c9bdd0>'+ 
  'Need directions to the stadium?</a>'+
  '</div>'+
  '</div>';
var arizonawindow= new google.maps.InfoWindow({
  content: arizonaString
});
google.maps.event.addListener(arizonamarker, 'click', function() {
arizonawindow.open(map, arizonamarker);
});


 var padres = 'image link';
   var padresLatLng = new google.maps.LatLng(32.7073, -117.1566);
   var padresmarker = new google.maps.Marker({
  position: padresLatLng,
  map: map,
  icon: padres,
  title: 'San Diego Padres'
     }); 
var padresString =  '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">San Diego Padres</h1>'+
  '<div id="bodyContent">'+
  '</div>'+
  '</div>';
var padreswindow= new google.maps.InfoWindow({
  content: padresString
 });
 google.maps.event.addListener(padresmarker, 'click', function() {
 padreswindow.open(map, padresmarker);
 });


}
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
 <div id="map-canvas"/>
</body>
</html>
Was it helpful?

Solution

Your code with single (global) infowindow:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?sensor=false">
 </script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript">
var infowindow = new google.maps.InfoWindow();
 function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(39.8282, -98.5795),
      zoom: 4
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
var mcOptions = {gridSize: 50, maxZoom: 15};

  var arizona = 'image link';
   var arizonaLatLng = new google.maps.LatLng(33.44528, -112.06694);
   var arizonamarker = new google.maps.Marker({
  position: arizonaLatLng,
  map: map,
  icon: arizona,
  title: 'Arizona Diamondbacks'
     }); 
var arizonaString =  '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">Arizona Diamondbacks</h1>'+
  '<div id="bodyContent">'+
  '<p><a href=https://www.google.com/maps/place/Chase+Field/@33.446313,-112.06668,18z/data=!3m1!4b1!4m2!3m1!1s0x872b11f5f3e35ef1:0x7278068b96c9bdd0>'+ 
  'Need directions to the stadium?</a>'+
  '</div>'+
  '</div>';
google.maps.event.addListener(arizonamarker, 'click', function() {
infowindow.setContent(arizonaString);
infowindow.open(map, arizonamarker);
});


 var padres = 'image link';
   var padresLatLng = new google.maps.LatLng(32.7073, -117.1566);
   var padresmarker = new google.maps.Marker({
  position: padresLatLng,
  map: map,
  icon: padres,
  title: 'San Diego Padres'
     }); 
var padresString =  '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">San Diego Padres</h1>'+
  '<div id="bodyContent">'+
  '</div>'+
  '</div>';
 google.maps.event.addListener(padresmarker, 'click', function() {
 infowindow.setContent(padresString);
 infowindow.open(map, padresmarker);
 });


}
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
 <div id="map-canvas"/>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top