Reputation: 21

Javascript: Google Map does not show up

I have question regarding the code below: why does the google map not show up?

The script worked previously until I inserted the section where the map is told to draw a circle regarding the selected point. I used the code from the sample code here. I'm not really sure if it has been properly modified. What I want to do here is to used the selected point and create a circle buffer around it. The distances can be specified by the end user and polygons within this distance will show up.

The data is private, so it cannot be shared. TableID1 is point layer and TableID2 is a polygon layer.

Any help is greatly appreciated.

Here's the code:

<!DOCTYPE html>


<html>

<head>


<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Wells</title>

<style>
        #map-canvas { width:800px; height:600px; }
      </style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

    function initialize() {
        var tableId = '';
        var tableId2 = '';       
        var locationColumn = 'geometry';
        var locationColumn2 = 'geometry';

        var map = new google.maps.Map(document.getElementById('map-canvas'), 
        {
          center: new google.maps.LatLng(43.85012691109855, -79.75539434814452),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var layer = new google.maps.FusionTablesLayer({

        query: {
            select: locationColumn,
            from: tableId,
            where: 'ST_INTERSECTS (description, CIRCLE(wellid), 5000))'
             },

        map: map
        });

        var layer2 = new google.maps.FusionTablesLayer({

        query: {
            select: locationColumn2,
            from: tableId2
          },
          map: map
        });

google.maps.event.addDomListener(document.getElementById('wellid'),

'change', 
function() {
        updateMap(layer, tableId, locationColumn);
        });

      }

// Update the query sent to the Fusion Table Layer based on  
// the user selection in the select menu

function updateMap(layer, tableId, locationColumn) {
        var wellid = document.getElementById('wellid').value;
        if (wellid) {
          layer.setOptions({
            query: {
              select: locationColumn,
              from: tableId,
              where: "description CONTAINS '" + wellid + "'"
            }
          });
        } 

else {
        layer.setOptions({
            query: {
              select: locationColumn,
              from: tableId
            }
          });
        }
      }



// Create a map circle object to visually show the radius.

        var circle = new google.maps.Circle({
          center: new google.maps.LatLng(wellid),
          radius: 5000,
          map: map,
          fillOpacity: 0.2,
          strokeOpacity: 0.5,
          strokeWeight: 1
        });

        // Update the radius when the user makes a selection.
        google.maps.event.addDomListener(document.getElementById('radius'),
            'change', function() {
              var meters = parseInt(this.value, 10);
              layer.setOptions({
                query: {
                  select: 'description',
                  from: tableid,
                  where: 'ST_INTERSECTS(Address, ' +
                      'CIRCLE(wellid), ' + meters + '))'
                }
              });
              circle.setRadius(meters);
            });

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

    </script>


</head>


<body>

<div id="map-canvas"></div>

<label>Well ID:</label>


<select id="wellid">


<option value="">--Select--</option>


<option value="Well ID: 9">9</option>


<option value="Well ID: 129">129</option>


<option value="Well ID: 130">130</option>


<option value="Well ID: 131">131</option>


<option value="Well ID: 384">384</option>


<option value="Well ID: 469">469</option>


<option value="Well ID: 470">470</option>


<option value="Well ID: 494">494</option>


<option value="Well ID: 495">495</option>


<option value="Well ID: 697">697</option>


<option value="Well ID: 698">698</option>


<option value="Well ID: 735">735</option>


<option value="Well ID: 737">737</option>


</select>


</body>


</html>

Upvotes: 2

Answers (1)

wf9a5m75

Reputation: 6158

Ok, I fixed your code:

<!DOCTYPE html>

<html>

  <head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <title>Wells</title>

    <style>
      #map-canvas {
        width: 800px;
        height: 600px;
      }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
      var map, wellid;
      function initialize() {
        var tableId = '';
        var tableId2 = '';
        var locationColumn = 'geometry';
        var locationColumn2 = 'geometry';

        map = new google.maps.Map(document.getElementById('map-canvas'), {
          center : new google.maps.LatLng(43.85012691109855, -79.75539434814452),
          zoom : 10,
          mapTypeId : google.maps.MapTypeId.ROADMAP
        });

        var layer = new google.maps.FusionTablesLayer({

          query : {
            select : locationColumn,
            from : tableId,
            where : 'ST_INTERSECTS (description, CIRCLE(wellid), 5000))'
          },

          map : map
        });

        var layer2 = new google.maps.FusionTablesLayer({

          query : {
            select : locationColumn2,
            from : tableId2
          },
          map : map
        });

        google.maps.event.addDomListener(document.getElementById('wellid'), 'change', function() {
          updateMap(layer, tableId, locationColumn);
        });

      }

      // Update the query sent to the Fusion Table Layer based on
      // the user selection in the select menu

      function updateMap(layer, tableId, locationColumn) {
        wellid = document.getElementById('wellid').value;
        if (wellid) {
          layer.setOptions({
            query : {
              select : locationColumn,
              from : tableId,
              where : "description CONTAINS '" + wellid + "'"
            }
          });
        } else {
          layer.setOptions({
            query : {
              select : locationColumn,
              from : tableId
            }
          });
        }
      }

      google.maps.event.addDomListener(window, 'load', function() {
        // Create a map circle object to visually show the radius.
        var circle = new google.maps.Circle({
          center : new google.maps.LatLng(wellid),
          radius : 5000,
          map : map,
          fillOpacity : 0.2,
          strokeOpacity : 0.5,
          strokeWeight : 1
        });

        // Update the radius when the user makes a selection.
        google.maps.event.addDomListener(document.getElementById('radius'), 'change', function() {
          var meters = parseInt(this.value, 10);
          layer.setOptions({
            query : {
              select : 'description',
              from : tableid,
              where : 'ST_INTERSECTS(Address, ' + 'CIRCLE(wellid), ' + meters + '))'
            }
          });
          circle.setRadius(meters);
        });
      });

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

    </script>

  </head>

  <body>

    <div id="map-canvas"></div>

    <label>Radius:</label>
    <input type="number" id="radius" value="1">
    <label>Well ID:</label>

    <select id="wellid">
      <option value="">--Select--</option>
      <option value="Well ID: 9">9</option>
      <option value="Well ID: 129">129</option>
      <option value="Well ID: 130">130</option>
      <option value="Well ID: 131">131</option>
      <option value="Well ID: 384">384</option>
      <option value="Well ID: 469">469</option>
      <option value="Well ID: 470">470</option>
      <option value="Well ID: 494">494</option>
      <option value="Well ID: 495">495</option>
      <option value="Well ID: 697">697</option>
      <option value="Well ID: 698">698</option>
      <option value="Well ID: 735">735</option>
      <option value="Well ID: 737">737</option>
    </select>
  </body>
</html>

Upvotes: 1

Javascript: Google Map does not show up

Answers (1)

Related Questions