dispalying info window

63 views

Skip to first unread message

sk

unread,

Jun 6, 2012, 5:39:03 AM6/6/12

to google-visua...@googlegroups.com

hi
i'm trying to display a map
     when we click on any state of map the info window will display pie and column chart(the pie and column chart are in different html file i need to cal that file) of that state,that is to be open in another window
please kindly help me

<!DOCTYPE html>
<html>
<head>
<style>
    #map-canvas { width:800px; height:800px; }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
    var map;
    var layerl0;
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(21.7679,78.8718),
        zoom: 5
      });
      var style = [
        {
          featureType: 'road.highway',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'road.arterial',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'road.local',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'administrative.country',
          elementType: 'all',
          stylers: [
            { visibility: 'on' }
          ]
        },
        {
          featureType: 'administrative.locality',
          elementType: 'all',
          stylers: [
            { visibility: 'on' }
          ]
        },
        {
          featureType: 'administrative.neighborhood',
          elementType: 'all',
          stylers: [
            { visibility: 'on' }
          ]
        },
        {
          featureType: 'administrative.land_parcel',
          elementType: 'all',
          stylers: [
            { visibility: 'on' }
          ]
        },
        {
          featureType: 'poi',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'transit',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        }
      ];
      var styledMapType = new google.maps.StyledMapType(style, {
        map: map,
        name: 'Styled Map'
      });
      map.mapTypes.set('map-style', styledMapType);
      map.setMapTypeId('map-style');
      layerl0 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
          from: '4070871'
        },
        map: map
      });
    }
    function changeMapl0() {
      var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
      layerl0.setOptions({
        query: {
          select: "'geometry'",
          from: 4070871,
          where: "'Type' = '" + searchString + "'"
        }
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas"></div>
    <div style="margin-top: 10px;">
      <label>Sector</label>
      <select id="search-string-l0" onchange="changeMapl0(this.value);">
        <option value="">--Sector--</option>
        <option value="Formally Approved">Formally Approved</option>
        <option value="In-Principle Approved">In-Principle Approved</option>
        <option value="Operational">Operational</option>
        <option value="in-Principle Approved">in-Principle Approved</option>
      </select>
    </div>
</body>
</html>

asgallant

unread,

Jun 6, 2012, 9:38:22 AM6/6/12

to google-visua...@googlegroups.com

You'll have to ask the Google Maps people how to register event handlers in the Map. In the event handler, you can call window.open to open the page with the charts in it.

Reply all

Reply to author

Forward

0 new messages