0

I've been trying to add info windows to my markers and tried a lot of options which i've found on this site but nothing seems to work for me.

My google maps has a custom image and filters.

I hope someone can help me out with the coding for this. I want all markers to have its unique info window.

Live action: (select a map first at the right) Click here for live map

Code:

<table>
  <tr>
    <th><div id="map_canvas" style="background: #1B2D33;"> </div> </th>
    <th><div id="sizer"><br><br><br>
    <h2>Spoiler Alert!</h2>
    <br>Markers are disabled by default
    <br>Select the map to view map markers.
    <br><br>
    <form id="sizer" action="#" method="get" accept-charset="utf-8" value="1">
        <select id="selector">
            <option value="1">Select Map</option>
            <option value="1">Khenarthi's Roost</option>
        </select>
        <br><br>
        <fieldset class="option1">
            <label class="label_check" for="checkbox-01"><input name="checkbox-01" id="checkbox-01" value="1" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/city.png"title="City"></label>
            <label class="label_check" for="checkbox-02"><input name="checkbox-02" id="checkbox-02" value="2" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/wayshrine.png"title="Wayshrine"></label>
            <label class="label_check" for="checkbox-03"><input name="checkbox-03" id="checkbox-03" value="3" type="checkbox"  /><img src="http://www.budget-computing.nl/images/teso/markers/camp.png"title="Camp"></label>
            <label class="label_check" for="checkbox-04"><input name="checkbox-04" id="checkbox-04" value="4" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/poi.png"title="Point of Interest"></label>
            <label class="label_check" for="checkbox-05"><input name="checkbox-05" id="checkbox-05" value="5" type="checkbox"  /><img src="http://www.budget-computing.nl/images/teso/markers/farm.png"title="Farm"></label>
            <label class="label_check" for="checkbox-06"><input name="checkbox-06" id="checkbox-06" value="6" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/harbor.png"title="Harbor"></label>
            <label class="label_check" for="checkbox-07"><input name="checkbox-07" id="checkbox-07" value="7" type="checkbox"  /><img src="http://www.budget-computing.nl/images/teso/markers/cave.png"title="Cave"></label>
            <label class="label_check" for="checkbox-08"><input name="checkbox-08" id="checkbox-08" value="8" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/castleruin.png"title="Castle"></label>
            <label class="label_check" for="checkbox-09"><input name="checkbox-09" id="checkbox-09" value="9" type="checkbox" /><img src="http://www.budget-computing.nl/images/teso/markers/skyshard.png"title="Skyshard"></label>
        </fieldset>
        <br> <h2> About the Map</h2>
        <br>Welcome to the '' interactive map. 
        <br>
        <br>This map allows you to explore the world of The Elder Scrolls Online interactive.
        <br>You can select filters to show or disable points of interest on the world.
    </form>
</div>
</th>
</tr>
</table>


<script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.budget-computing.nl/teso_map/load_tiles.js"></script>
<script src="http://www.budget-computing.nl/teso_map/normalizedcoord.js"></script>
<script src="http://www.budget-computing.nl/teso_map/map/khenarthis_roost/center.js"></script>
<script src="http://www.budget-computing.nl/teso_map/markers.js"></script>
<script>
function initialize() {
  var mapOptions = {
    center: mapcenter,
    zoom: 6,
    minZoom: 6,
    draggable: false,
    streetViewControl: false,
    mapTypeControl: true,
    mapTypeControlOptions: {
      mapTypeIds: ["map"]
    },
    panControl: false,
    panControlOptions: {
        position: google.maps.ControlPosition.TOP_Left
    },
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_Center
}
  };

  var iconBase = 'http://www.budget-computing.nl/images/teso/markers/';


  //select the sizer here
        var sizer=$('#sizer input:checkbox');

// Attach the map to the document
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

          // hide the fieldsets on page load
          $(".option1").hide();
          // Connect the group of checkboxes to the select

          $("select").change(function() {
            var $this = $(this);
            if($this.val() === "1") {
                    // Link checkbox markers
                        sizer.change(function(e){
                          var props=0;

                          $.each(sizer,function(i,b){
                              props+=($(b).is(':checked'))?Math.pow(2,i):0;
                            });

                          for(var m=0; m < markers1.length; m++){
                              var positions1 = markers1[m].setMap((props & markers1[m].props ||!props)?map: null);
                          }


                        }).eq(0).trigger('change');

                      // Removing all the markers

                      for (i=0; i< markers1.length; i++) {
                          markers1[i].setMap(null)
                      }

                      $(".option1").show();
                      newPos = new google.maps.LatLng(-47,0);
                      map.setZoom(6);

                  setTimeout(function() {
                      markers1=[new google.maps.Marker({
                          position: positions1[0],
                          map: map,
                          icon: iconBase + 'camp.png',
                          props: 4,
                          title: 'marker1'
                      }),new google.maps.Marker({
                          position: positions1[1],
                          map: map,
                          icon: iconBase + 'city.png',
                          props: 1,
                          title: 'marker2'
                      }),new google.maps.Marker({
                          position: positions1[2],
                          map: map,
                          icon: iconBase + 'wayshrine.png',
                          props: 2,
                          title: 'marker3'
                      }),new google.maps.Marker({
                          position: positions1[3],
                          map: map,
                          icon: iconBase + 'wayshrine.png',
                          props: 2,
                          title: 'marker4'
                      }),new google.maps.Marker({
                          position: positions1[4],
                          map: map,
                          icon: iconBase + 'poi.png',
                          props: 8,
                          title: 'marker5'
                      }),new google.maps.Marker({
                          position: positions1[5],
                          map: map,
                          icon: iconBase + 'poi.png',
                          props: 8,
                          title: 'marker6'
                      }),new google.maps.Marker({
                          position: positions1[6],
                          map: map,
                          icon: iconBase + 'poi.png',
                          props: 8,
                          title: 'marker7'
                      }),new google.maps.Marker({
                          position: positions1[7],
                          map: map,
                          icon: iconBase + 'poi.png',
                          props: 8,
                          title: 'marker8'
                      }),new google.maps.Marker({
                          position: positions1[8],
                          map: map,
                          icon: iconBase + 'poi.png',
                          props: 8,
                          title: 'marker9'
                      }),new google.maps.Marker({
                          position: positions1[9],
                          map: map,
                          icon: iconBase + 'cave.png',
                          props: 64,
                          title: 'marker10'
                      }),new google.maps.Marker({
                          position: positions1[10],
                          map: map,
                          icon: iconBase + 'castleruin.png',
                          props: 128,
                          title: 'marker11'
                      }),new google.maps.Marker({
                          position: positions1[11],
                          map: map,
                          icon: iconBase + 'farm.png',
                          props: 16,
                          title: 'marker12'
                      }),new google.maps.Marker({
                          position: positions1[12],
                          map: map,
                          icon: iconBase + 'farm.png',
                          props: 16,
                          title: 'marker13'
                      }),new google.maps.Marker({
                          position: positions1[13],
                          map: map,
                          icon: iconBase + 'farm.png',
                          props: 16,
                          title: 'marker14'
                      }),new google.maps.Marker({
                          position: positions1[14],
                          map: map,
                          icon: iconBase + 'harbor.png',
                          props: 32,
                          title: 'marker15'
                      }),new google.maps.Marker({
                          position: positions1[15],
                          map: map,
                          icon: iconBase + 'harbor.png',
                          props: 32,
                          title: 'marker16'
                      }),new google.maps.Marker({
                          position: positions1[16],
                          map: map,
                          icon: iconBase + 'skyshard.png',
                          props: 256,
                          title: 'marker17'
                      }),new google.maps.Marker({
                          position: positions1[17],
                          map: map,
                          icon: iconBase + 'skyshard.png',
                          props: 256,
                          title: 'marker18'
                      }),new google.maps.Marker({
                          position: positions1[18],
                          map: map,
                          icon: iconBase + 'skyshard.png',
                          props: 256,
                          title: 'marker19'
                      }),new google.maps.Marker({
                          position: positions1[19],
                          map: map,
                          icon: iconBase + 'skyshard.png',
                          props: 256,
                          title: 'marker20'
                      }),new google.maps.Marker({
                          position: positions1[20],
                          map: map,
                          icon: iconBase + 'skyshard.png',
                          props: 256,
                          title: 'marker21'
                      }),new google.maps.Marker({
                          position: positions1[21],
                          map: map,
                          icon: iconBase + 'skyshard.png',
                          props: 256,
                          title: 'marker22'
                      }),new google.maps.Marker({
                          position: positions1[22],
                          map: map,
                          icon: iconBase + 'skyshard.png',
                          props: 256,
                          title: 'marker23'
                    })];

                 },800)
            } 
             map.panTo(newPos);

          });
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  map.mapTypes.set('map', mapType);
  map.setMapTypeId('map');
  map.setZoom(1);

  markers1=[],
  numProps=8;   // The number of the groups

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Sunny Patel
  • 7,830
  • 2
  • 31
  • 46
  • possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) – geocodezip Mar 12 '14 at 17:22
  • I already tried that one. I can't get it to work. I would love it if someone can provide me with some code what to do :) –  Mar 12 '14 at 21:35
  • Don't see any sign of function closure in your code (which is how the infowindow's contents is associated with the marker). – geocodezip Mar 12 '14 at 23:13
  • True. I tried that but it 'bricked' the map so i took everything out and posted it here. Could you help me out what code to alter to make it work? –  Mar 12 '14 at 23:28
  • The simplest way to do it is to use a "createMarker" function (see most of the examples on http://www.geocodezip.com), to associate the infowindow contents with the marker. – geocodezip Mar 12 '14 at 23:31

1 Answers1

0

I'm doing something very very similar to what you have, but still in its infancy (letting authorized users submit markers and regional polygons).

First, create an InfoWindow with whatever options you want. Basically you'll want to attach (click) event listeners to each marker inside marker1. So loop over them and inside the callback function, you can reference that InfoWindow and tell it to open on your map with the specified coordinates of that marker.

Something along the lines of:

var iw = new InfoWindow({options:"go here"});
markers1.forEach( function(marker){
    google.maps.event.addListener( marker, 'click', function() {
        iw.option( map, this );
    });
});

I hope this answers it, good luck!

Sunny Patel
  • 7,830
  • 2
  • 31
  • 46
  • Could you look trough my code and ajust yours so it fit mines? im not any good with Jquery :( –  Mar 17 '14 at 21:35
  • None of that is jQuery (no $'s!). The first line can be placed with the rest of your declarations (like after `marker1=[]`, and the `markers1.forEach` statement (all 5 lines) can be placed **after** you setup the `markers1` array inside the `setTimeout` (the blank line above the timeout being _800_ (ms)). – Sunny Patel Mar 18 '14 at 22:57
  • Thanks and yeah this is no jquery sorry for my fault. are the variables ready to go the way you made them? or do i still have to ajust something? –  Mar 20 '14 at 00:24
  • @TomvanDruten, I've submitted an edit to your code with the added changes. They should be good to go as is. – Sunny Patel Mar 20 '14 at 01:29
  • Thanks. I'll test it soon. Don't worry about the 'answer' thing. ill take care of it when i tested it. –  Mar 27 '14 at 22:51