CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-fusion-tables
benjaminadk
benjaminadk

Reputation: 498

Google Maps Javascript API with Fusion Tables - How to get Custom Info Window

I have a similar question to this post but I have no idea where they are getting templateId from. I haven't managed to suppress the default info window(even though I thought I put the right code in) and I don't know how to get my custom info window from my fusion table to show up. from this other guys code it looks like I need to specify a templateId so the API knows how to format the window. Right now I have the following code to initialize the map.

      //CREATE AN INSTANCE OF A GOOGLE MAP
        map = new google.maps.Map(document.getElementById('map'), {
          //MAP BASED ON FOLLOWING CONTROLS AND THEIR OPTIONS
           center: {lat:33.746828, lng:-118.299448},
           zoom: 13,
           rotateControl: true,
           scaleControl: true,
           mapTypeControl: true,
           mapTypeControlOptions: {
             style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
             position: google.maps.ControlPosition.TOP_LEFT,
            mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
                    'styled_map']
          },
           streetViewControl: true,
               streetViewControlOptions: {
               position: google.maps.ControlPosition.LEFT_TOP},
           zoomControl: true,
               zoomControlOptions: {
               position: google.maps.ControlPosition.LEFT_TOP},
           fullscreenControl: true,
               fullscreenControlOptions: {
               position: google.maps.ControlPosition.TOP_LEFT}
     });
  var infoWindow = new google.maps.InfoWindow();
  //CALL INSTANCE OF NEW LAYER ADDING IN MY FUSION TABLE
        var layer = new google.maps.FusionTablesLayer({
  //BASED ON A QUERY TO THE FUSION DATA AND DEFINING COORDINATES
    query: {
      select: "Location",
      from: '1h7ZlgimMOBfutZ2dLspShafWRnNE2TlNmQgVPb1T'
    },
          styles: [{
  markerOptions: {
  iconName: "measle_turquoise"}}
                  ],
 suppressInfoWindows: true
          
  });
  google.maps.event.addListener(layer, 'click', function(e) {windowControl(e, infoWindow, map);
            });
  function windowControl(e, infoWindow, map) {
            infoWindow.setOptions({
                content: e.infoWindowHtml,
                position: e.latLng,
                pixelOffset: e.pixelOffset
            });
            infoWindow.open(map);
        }
  layer.setMap(map);

        //ADD MY CUSTOM STYLE TO THE LIST OF MAP TYPES AND SET IT TO ACTIVE
        map.mapTypes.set('styled_map', styledMapType);
        map.setMapTypeId('styled_map');

Sorry its a lot of code. My main question is how do i find this templateId and am i missing anything else that i need to get my custom info window to show up on click of marker? thanks.

Upvotes: 0

Views: 247

Answers (1)

benjaminadk
benjaminadk

Reputation: 498

I found it but I will leave this up because it isn't that obvious. The templateId and styleId values can be found inside of your Fusion Table. From within Fusion Tables go to Tools -> Publish. Now activate the drop down for "Get Html and Javascript". Within here you will find them. I am making a custom map for my mom with different styles and i'm using all kinds of services so the code this provides is different than mine but the templateId and styleId still work. Now I just have to make my custom style not so ugly....also I wonder why it doesn't default to showing you custom style. If you are bringing in your custom data in a fusionTableLayer why not the info windows too. Im sure there is a simple answer that might have to do with more complex maps than mine(that contain more layers), but I don't readily see it.

Too get you custom info windows just plug in the values you find in your layer. For my map I put them right after 

iconName: "measle_turquoise"}}
                  ],

and boom i had my custom info windows! Hope this helps. my ugly info windows I tried to embed image but don't have enough slackoverflow points yet i guess

Upvotes: 1

Related Questions