SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    GMaps javascript problem

    I'm still learning javascript so bear with me but I'm having a problem with and onclick function in GMaps. We've got a planning map for customers with a bunch of polygons to demarcate regions. When they click on a polygon I want the map to zoom in on the region but then also remove the polygon so the color/shading doesn't interfere with their view. I can get either one to happen on it's own but can't get both to happen even though I think I have the code in the right order. Any help?

    Code:
    var map;
    var src = 'https://www.huts.org/Tests/Maps/GPSTracks/fullHutSystemEdit5.kml';
    	
          function initialize() {
    	 
            var map_canvas = document.getElementById('map-canvas');
            var map_options = {
              center: new google.maps.LatLng(39.51174, -106.26735),
              zoom: 9,
              mapTypeId: google.maps.MapTypeId.TERRAIN,
    		  mapTypeControlOptions:{
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                navigationControlOptions:{
                    style: google.maps.NavigationControlStyle.SMALL
                }
            }
            var map = new google.maps.Map(map_canvas, map_options)
    		 loadKmlLayer(src, map);	
    		 
    		 var poly10th 
    		 var polyBraun
    		 var polyGrand
    		 
    		  var TenthCoords = [
    			new google.maps.LatLng(39.731481865131, -106.9903564453125),
    			new google.maps.LatLng(39.150297710716686, -106.9903564453125),
    			new google.maps.LatLng(39.15029771071668, -105.91644287109375),
    			new google.maps.LatLng(39.731481865131, -105.91644287109375),
    			];
    			
    		var BraunCoords = [
    			new google.maps.LatLng(39.150297710716686, -106.9903564453125),
    			new google.maps.LatLng(38.9348437659246, -106.9903564453125),
    			new google.maps.LatLng(38.9348437659246, -106.57562255859375),
    			new google.maps.LatLng(39.150297710716686, -106.57562255859375),
    			];
    		var GrandCoords = [
    			new google.maps.LatLng(40.06651166669527, -105.91644287109375),
    			new google.maps.LatLng(39.731481865131, -105.91644287109375),
    			new google.maps.LatLng(39.731481865131, -105.53741455078125),
    			new google.maps.LatLng(40.06651166669527, -105.53741455078125),
    			];
    			
    		var systemCoords = [ TenthCoords, BraunCoords, GrandCoords];
    		
    			 poly10th = new google.maps.Polygon({
    				name: "10th Mountain Hut System",
    				paths: systemCoords [0],
    				strokeColor: '#cccccc',
    				strokeOpacity: 0.8,
    				strokeWeight: 2,
    				fillColor: '#00CED1',
    				map:map,
    				fillOpacity: 0.25
    				});
    
    			polyBraun = new google.maps.Polygon({
    				name: "Braun & Friends Hut System",
    				paths: systemCoords [1],
    				strokeColor: '#cccccc',
    				strokeOpacity: 0.8,
    				strokeWeight: 2,
    				fillColor: '#00CED1',
    				map:map,
    				fillOpacity: 0.25
    				});
    				
    			polyGrand = new google.maps.Polygon({
    				name: "Grand Huts System",
    				paths: systemCoords [2],
    				strokeColor: '#cccccc',
    				strokeOpacity: 0.8,
    				strokeWeight: 2,
    				fillColor: '#00CED1',
    				map:map,
    				fillOpacity: 0.25
    				});
    				
    		poly10th.setMap(map);
    		polyBraun.setMap(map);
    		polyGrand.setMap(map);
    		
    	var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h5 id="firstHeading" class="firstHeading">10th Mountain Division Hut System</h5>'+
          '</div>';
    	var contentStringBraun = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h5 id="firstHeading" class="firstHeading">Braun & Friends Hut System</h5>'+
          '</div>';
    		var contentStringGrand = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h5 id="firstHeading" class="firstHeading">Grand Huts Association</h5>'+
          '</div>';
    	  
    		var infowindow = new google.maps.InfoWindow({
    			content: contentString,
    			maxWidth: 250
    				});
    		var infowindowBraun = new google.maps.InfoWindow({
    			content: contentStringBraun,
    			maxWidth: 250
    				});
    		var infowindowGrand = new google.maps.InfoWindow({
    			content: contentStringGrand,
    			maxWidth: 250
    				});
    			google.maps.event.addListener(poly10th, "mouseover", function() {
    			   var laty = 39.44474
    			   var lngy = -106.42499
    			infowindow.setPosition(new google.maps.LatLng(laty,lngy));
    				infowindow.open(map);
    				});
    			google.maps.event.addListener(polyBraun, "mouseover", function() {
    			   var laty = 39.05705
    			   var lngy = -106.79873
    			infowindowBraun.setPosition(new google.maps.LatLng(laty,lngy));
    				infowindowBraun.open(map);
    				});
    			google.maps.event.addListener(polyGrand, "mouseover", function() {
    			   var laty = 39.88286
    			   var lngy = -105.75916
    			infowindowGrand.setPosition(new google.maps.LatLng(laty,lngy));
    				infowindowGrand.open(map);
    				});
    			google.maps.event.addListener(poly10th, 'mouseout', function() {
    				infowindow.close(map,poly10th);
    				});
    			google.maps.event.addListener(poly10th, 'click', function() {
    			map.setZoom(11);
    			map.setCenter(poly10th.getPosition());
    			});
    			google.maps.event.addListener(poly10th, 'click', function() {
    			poly10th.setMap(null);
    			});
    			google.maps.event.addListener(polyBraun, 'mouseout', function() {
    				infowindowBraun.close(map,polyBraun);
    				});
    			google.maps.event.addListener(polyGrand, 'mouseout', function() {
    				infowindowGrand.close(map,polyGrand);
    				});
    				
    			google.maps.event.addListener(poly10th,"mouseover",function(){
    				this.setOptions({fillColor: "#00FF00"});
    				}); 
    			google.maps.event.addListener(poly10th,"mouseout",function(){
    				this.setOptions({fillColor: "#00CED1"});
    				});
    			google.maps.event.addListener(polyBraun,"mouseover",function(){
    				this.setOptions({fillColor: "#00FF00"});
    				}); 
    			google.maps.event.addListener(polyBraun,"mouseout",function(){
    				this.setOptions({fillColor: "#00CED1"});
    				});
    			google.maps.event.addListener(polyGrand,"mouseover",function(){
    				this.setOptions({fillColor: "#00FF00"});
    				}); 
    			google.maps.event.addListener(polyGrand,"mouseout",function(){
    				this.setOptions({fillColor: "#00CED1"});
    				});
      };
    	   
    
    function loadKmlLayer(src, map) {
      var kmlLayer = new google.maps.KmlLayer(src, {
        suppressInfoWindows: false,
        preserveViewport: true,
        map: map
      });
    }
          google.maps.event.addDomListener(window, 'load', initialize);

  2. #2
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    GMaps Javascript problem, Round 2

    Not sure what happened to my other post but it keep saying invalid post. Not sure if I accidentally deleted it or something.

    Anyways I'm building a planning map for customers with various polygons to demarcate different regions. When people click on a polygon I want the map to recenter and zoom in, but then I want to remove the polygon after the zoom so the color/shading doesn't interfere with the users view. I can get each function to work fine on its own but can't get both to happen even though I think I have everything in the correct order. I'm still learning javascript so I apologize if the answer should be obvious. Thanks

    Code JavaScript:
            var map;
    	var src = 'https://www.huts.org/Tests/Maps/GPSTracks/fullHutSystemEdit5.kml';
     
          function initialize() {
     
            var map_canvas = document.getElementById('map-canvas');
            var map_options = {
              center: new google.maps.LatLng(39.51174, -106.26735),
              zoom: 9,
              mapTypeId: google.maps.MapTypeId.TERRAIN,
    		  mapTypeControlOptions:{
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                navigationControlOptions:{
                    style: google.maps.NavigationControlStyle.SMALL
                }
            }
            var map = new google.maps.Map(map_canvas, map_options)
    		 loadKmlLayer(src, map);	
     
    		 var poly10th 
    		 var polyBraun
    		 var polyGrand
     
    		  var TenthCoords = [
    			new google.maps.LatLng(39.731481865131, -106.9903564453125),
    			new google.maps.LatLng(39.150297710716686, -106.9903564453125),
    			new google.maps.LatLng(39.15029771071668, -105.91644287109375),
    			new google.maps.LatLng(39.731481865131, -105.91644287109375),
    			];
     
    		var BraunCoords = [
    			new google.maps.LatLng(39.150297710716686, -106.9903564453125),
    			new google.maps.LatLng(38.9348437659246, -106.9903564453125),
    			new google.maps.LatLng(38.9348437659246, -106.57562255859375),
    			new google.maps.LatLng(39.150297710716686, -106.57562255859375),
    			];
    		var GrandCoords = [
    			new google.maps.LatLng(40.06651166669527, -105.91644287109375),
    			new google.maps.LatLng(39.731481865131, -105.91644287109375),
    			new google.maps.LatLng(39.731481865131, -105.53741455078125),
    			new google.maps.LatLng(40.06651166669527, -105.53741455078125),
    			];
     
    		var systemCoords = [ TenthCoords, BraunCoords, GrandCoords];
     
    			 poly10th = new google.maps.Polygon({
    				name: "10th Mountain Hut System",
    				paths: systemCoords [0],
    				strokeColor: '#cccccc',
    				strokeOpacity: 0.8,
    				strokeWeight: 2,
    				fillColor: '#00CED1',
    				map:map,
    				fillOpacity: 0.25
    				});
     
    			polyBraun = new google.maps.Polygon({
    				name: "Braun & Friends Hut System",
    				paths: systemCoords [1],
    				strokeColor: '#cccccc',
    				strokeOpacity: 0.8,
    				strokeWeight: 2,
    				fillColor: '#00CED1',
    				map:map,
    				fillOpacity: 0.25
    				});
     
    			polyGrand = new google.maps.Polygon({
    				name: "Grand Huts System",
    				paths: systemCoords [2],
    				strokeColor: '#cccccc',
    				strokeOpacity: 0.8,
    				strokeWeight: 2,
    				fillColor: '#00CED1',
    				map:map,
    				fillOpacity: 0.25
    				});
     
    		poly10th.setMap(map);
    		polyBraun.setMap(map);
    		polyGrand.setMap(map);
     
    		var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h5 id="firstHeading" class="firstHeading">10th Mountain Division Hut System</h5>'+
          '</div>';
    		var contentStringBraun = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h5 id="firstHeading" class="firstHeading">Braun & Friends Hut System</h5>'+
          '</div>';
    		var contentStringGrand = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h5 id="firstHeading" class="firstHeading">Grand Huts Association</h5>'+
          '</div>';
     
    		var infowindow = new google.maps.InfoWindow({
    			content: contentString,
    			maxWidth: 250
    				});
    		var infowindowBraun = new google.maps.InfoWindow({
    			content: contentStringBraun,
    			maxWidth: 250
    				});
    		var infowindowGrand = new google.maps.InfoWindow({
    			content: contentStringGrand,
    			maxWidth: 250
    				});
    			google.maps.event.addListener(poly10th, "mouseover", function() {
    			   var laty = 39.44474
    			   var lngy = -106.42499
    			infowindow.setPosition(new google.maps.LatLng(laty,lngy));
    				infowindow.open(map);
    				});
    			google.maps.event.addListener(polyBraun, "mouseover", function() {
    			   var laty = 39.05705
    			   var lngy = -106.79873
    			infowindowBraun.setPosition(new google.maps.LatLng(laty,lngy));
    				infowindowBraun.open(map);
    				});
    			google.maps.event.addListener(polyGrand, "mouseover", function() {
    			   var laty = 39.88286
    			   var lngy = -105.75916
    			infowindowGrand.setPosition(new google.maps.LatLng(laty,lngy));
    				infowindowGrand.open(map);
    				});
    			google.maps.event.addListener(poly10th, 'mouseout', function() {
    				infowindow.close(map,poly10th);
    				});
    			google.maps.event.addListener(poly10th, 'click', function() {
    			map.setZoom(11);
    			map.setCenter(poly10th.getPosition());
    			});
    			google.maps.event.addListener(poly10th, 'click', function() {
    			poly10th.setMap(null);
    			});
    			google.maps.event.addListener(polyBraun, 'mouseout', function() {
    				infowindowBraun.close(map,polyBraun);
    				});
    			google.maps.event.addListener(polyGrand, 'mouseout', function() {
    				infowindowGrand.close(map,polyGrand);
    				});
     
    			google.maps.event.addListener(poly10th,"mouseover",function(){
    				this.setOptions({fillColor: "#00FF00"});
    				}); 
    			google.maps.event.addListener(poly10th,"mouseout",function(){
    				this.setOptions({fillColor: "#00CED1"});
    				});
    			google.maps.event.addListener(polyBraun,"mouseover",function(){
    				this.setOptions({fillColor: "#00FF00"});
    				}); 
    			google.maps.event.addListener(polyBraun,"mouseout",function(){
    				this.setOptions({fillColor: "#00CED1"});
    				});
    			google.maps.event.addListener(polyGrand,"mouseover",function(){
    				this.setOptions({fillColor: "#00FF00"});
    				}); 
    			google.maps.event.addListener(polyGrand,"mouseout",function(){
    				this.setOptions({fillColor: "#00CED1"});
    				});
      };
     
     
    function loadKmlLayer(src, map) {
      var kmlLayer = new google.maps.KmlLayer(src, {
        suppressInfoWindows: false,
        preserveViewport: true,
        map: map
      });
    }
          google.maps.event.addDomListener(window, 'load', initialize);


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •