Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Javascript and Google Maps Polygon Class

    I have a javascript that uses the Google maps api to create map markers and map shapes using the Marker and Polygon constructors of the API. I am then pushing the returned objects into an array. Each of the items in the array are then used to set them on the map when a checkbox, on a separate map legend is clicked. The markers all work correctly when the corresponding legend checkbox is clicked, but the polygons don't appear on the map when they are checked. I have looked at the array containing the markers and polygons, and the polygons have two objects for each shape added to the array. I don't have much experience with the Google Maps API and could use some guidance.

    Here is my code , the legend accesses the "click" event on the respective function that creates either the marker or the polygon using "trigger()". I have noticed that the trigger is only firing on the marker event handler and never the one attached to the polygon.

    Code:
    var gmarkers = [];
    var gicons = [];
    var openedInfoWindow = null; 
    var position;
    var marker;
        
    	/* Should match the onclick function in CampusMap-Selectors */
         
    	gicons["academic"] = "/render/file.act?path=/assets/images/map-data-files/academic.png";
    	gicons["dining"] = "/render/file.act?path=/assets/images/map-data-files/dining.png";
    	gicons["recreation"] = "/render/file.act?path=/assets/images/map-data-files/recreation.png";
    	gicons["housing"] = "/render/file.act?path=/assets/images/map-data-files/housing.png";
    	gicons["support"] = "/render/file.act?path=/assets/images/map-data-files/support.png";
    	gicons["parking"] = "/render/file.act?path=/assets/images/map-data-files/parking.png";
    	gicons["religion"] = "/render/file.act?path=/assets/images/map-data-files/chapel.png";
    	gicons["police"] = "/render/file.act?path=/assets/images/map-data-files/police.png";
    	gicons["health"] = "/render/file.act?path=/assets/images/map-data-files/health.png";
            gicons["accessibility"] = "/render/file.act?path=/assets/images/map-data-files/Accessible-Map-Icon.png";
     	
    	//FUNCTION Create the marker and set up the event window
    	var side_bar_html = "";
    	
    
    	function createMarker(point,name,category,html) {
    		var marker = new google.maps.Marker({position:point, map:map, icon:gicons[category]});
    
    		//store the category and name info as a marker properties
    		marker.mycategory = category;                                 
    		marker.myname = name;
    		google.maps.event.addListener(marker, "click", function() {
    			
                console.log("marker from trigger");
    			//create the new info window
    			var infowindow = new google.maps.InfoWindow({ content: html, maxWidth: 450 });
    			
    			//Close a currently opened info window
    			if (openedInfoWindow != null) openedInfoWindow.close(); 
    
    			//save this info window so we can close it later
    			openedInfoWindow = infowindow;
    			
    			//open it
    			infowindow.open(map, marker);
    		});
    		gmarkers.push(marker);	
    	}
      function createShape(options,name,category,position,html){
         
            var polyShape = new google.maps.Polygon(options);
            polyShape.name = name;
            polyShape.category = category;
            polyShape.position = position;
            polyShape.anchorPoint = new google.maps.LatLng(position);
            google.maps.event.addListener(polyShape, "click", function() {
        		console.log("polyShape from trigger");
                
    			//create the new info window
    			var infowindow = new google.maps.InfoWindow({ content: html, maxWidth: 450, position: new google.maps.LatLng(position) });
    			
    			//Close a currently opened info window
    			if (openedInfoWindow != null) openedInfoWindow.close(); 
    
    			//save this info window so we can close it later
    			openedInfoWindow = infowindow;
    			
    			//open it
    			infowindow.open(map);
    		});
            gmarkers.push(polyShape);
        }
    	//FUNCTION Show all markers of a particular category, and ensures the checkbox is checked
    	function show(category) {
    		for (var i=0; i
    <gmarkers.length; i++) {
    			if (gmarkers[i].mycategory == category) {
    				gmarkers[i].setMap(map);
                //    var position = gmarkers[i].position;
                //    return position;
    			}
    		}      
    		//Check the checkbox
    		document.getElementById(category+"box").checked = true;
    		
    		makeSidebar();
    	}
    	
    	//FUNCTION Hide all markers of a particular category, and ensures the checkbox is cleared
    	function hide(category) {
    		for (var i=0; i
        <gmarkers.length; i++) {
    			if (gmarkers[i].mycategory == category) {
    				gmarkers[i].setMap(null);
    			}
    		}
    		
    		//Clear the checkbox
    		document.getElementById(category+"box").checked = false;
    		
    		//Close the info window, in case its open on a marker that we just hid
    		if (openedInfoWindow != null) openedInfoWindow.close(); 
    		
    		makeSidebar();
    	}
    
    	//FUNCTION A checkbox has been clicked
    	function boxclick(box,category, position) {
    		if (box.checked) {
    			show(category);
    		} else {
    		hide(category);
    		}
    		//Rebuild the side bar
    		makeSidebar();
    	}
    
    	//FUNCTION Rebuild the sidebar to match the markers currently displayed
    	function makeSidebar() {
    		var html = "";
    		html += '
                <ul class="square">';
    		for (var i=0; i
                    <gmarkers.length; i++) {
    			if (gmarkers[i].getMap() != null ) {
    				html += '
                        <li>
                            <a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a>
                            </li>';
    			}
    		}
    		html += '
                        </ul>';
    		document.getElementById("side_bar").innerHTML = html;
    	}
    		
    	//FUNCTION Pick up the click and open the info window
    	function myclick(i) {
    		google.maps.event.trigger(gmarkers[i], "click");
    	}
    	
    	function init(){
    		// Initiates the map with Academic buildings selected
    		/*hide("academic");*/
    		hide("dining");
    		hide("recreation");
    		hide("housing");
    		hide("support");		
    		hide("parking");
    		hide("religion");
    		hide("police");
    		hide("health");
                    hide("accessibility");
    		
    	}
    	
    	//FUNCTION Parse data
    	process_it = function(doc) {
    		//split the document into sections
    		var lines = doc.split("
                        <hr>");
    		for (var i=0; i
                            <lines.length; i++) {
    			if (lines[i].length > 1) {
    				//split each line into parts separated by "|" and use the contents
    				var parts = lines[i].split("|");
    				var name = parts[0];
                    var category = parts[3];
        			var html = parts[4];
    				
                    if (parts[1].includes('[')) {
                        var paths = parts[1];
                        paths = JSON.parse(paths);
                        var options = parts[2];
                        options = JSON.parse(options);
                        options["paths"] = paths;
                        var position = paths[0];
                        // create the polygon
                    createShape(options,name,category,position,html);
                    } else {
        				var lat = parseFloat(parts[1]);
        				var lng = parseFloat(parts[2]);
                        var point = new google.maps.LatLng(lat,lng);
                    }
    				
    				// create the marker
    				createMarker(point,name,category,html);
                    
    				init(); /* Run initialize */
    			}
    		}
    	}
    
    	//Map options - See Google Maps API: http://bit.ly/1asx32C
    	var mapOptions = {
    		zoom: 16,
    		center: new google.maps.LatLng(39.483558, -87.324593),
    		panControl: false,
    		zoomControl: true,
    		scaleControl: true,
    		mapTypeControl: true,
    		mapTypeId: google.maps.MapTypeId.ROADMAP,
    			styles: [ { featureType: "poi", elementType: "labels", stylers:[ { visibility: "simplified" } ]
    					  }
    					]
    	}
    	
     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
     var bounds = new google.maps.LatLngBounds();
    
        window.onload = function() {
        	var side_bar_html = "";
           var data = "/render/file.act?path=/assets/scripts/modules/map-data.htm";
        
        //The first argument is the path of the marker data file
    	$.get(data, process_it);
    	
    	makeSidebar();
    }
    Last edited by svoltmer; Mar 13th, 2018 at 04:22 PM.

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,800
    Thanks
    58
    Thanked 684 Times in 679 Posts
    any messages in the error console? can we see a live page? It's hard to follow what's going on with only half the resources shown

  3. #3
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Sorry, here is the page:

    https://www.rose-hulman.edu/visit/ma...ctive-map.html

    When the "ADA Accessible" check box it ticked, it displays a list of entrances that are ADA Accessible, and at the top of the list are two Accessible Parking items, that when clicked should call the function myClick() which uses a trigger() to fire the event handler on the function createShape(). Currently that is not working. I've added console logs to the functions createShape() and createMarker() and the myClick() only triggers the CreateMarker() click event.

    Here is the data file that I am processing with the map lat lng info.

    https://www.rose-hulman.edu/assets/s...s/map-data.htm


    There are no console errors either.
    Last edited by svoltmer; Mar 13th, 2018 at 01:25 PM.

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,019
    Thanks
    3
    Thanked 430 Times in 419 Posts
    Could you explain what you mean by "polygon" being added? It's hard to know WHAT polygons are missing without knowing what they're even supposed to do.

    That said, your code could use some cleaning up... don't declare var each and every blasted time just comma delimit, if you're just going to set the values, JUST SET THE VALUES, you could probably squeeze a bit more speed out of it using the "assign on 'for'" method, and you're using indexed arrays which have piss poor browser support as of yet, did you mean that to be an OBJECT?

    In case you're not familiar with "assign on 'for'", assuming no values in the index of an array are loose false, you can do this:

    Code:
    for (var i = 0, marker; marker = gmarkers[i]; i++) {
    	if (marker.mycategory == category) {
    		marker.setMap(null);
    	}
    }
    It executes about 20% faster in Blink based browsers, 40% faster in IE and legacy FF (no difference in quantum?), and it's less code. Simpler too. Neat trick when working with nodelists or arrays of objects which are inherently slow to begin with.

    It's also a bit of a wonk making a website that has a Americans with Disabilities Act toggle that's heavy on JavaScript, has sections of illegible colour contrasts, and undersized px metric fonts in several sections -- a walking talking WCAG (and therefor ADA) violation. Seriously that .right-rail-module-content 18px followed by 0.7em is flipping the bird at why EM should even be used AND accessibility norms. Don't declare font-size in pixels!

    Really though I suspect your trying to use named indexes on an array are what's messing things up. That should be an object with for (var i in gmarkers) and NOT an array with a conventional loop... well, unless you want your string indexes to be ignored/not used.
    Last edited by deathshadow; Mar 13th, 2018 at 02:52 PM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  5. #5
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I am adding polygon shapes using the Google Maps API Polygon Class to show the position on the map for various accessible parking areas.

    One of them should be on the left side of Myers Parking lot. Cyan colored with lowered opacity. The other one is on the left edge of the "Visitors Tailgate Area".
    Last edited by svoltmer; Mar 13th, 2018 at 03:11 PM.

  6. #6
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,019
    Thanks
    3
    Thanked 430 Times in 419 Posts
    Are you sure that this:
    /render/file.act?path=/assets/scripts/modules/map-data.htm

    Shouldn't be just this:
    /assets/scripts/modules/map-data.htm

    Since the former 404's?

    I'd REALLY suggest that you break that data out to it's own file as a format JavaScript can actually handle like JSON -- or even as proper JavaScript instead of trying to string parse HTML. That's just begging for unnecessary complexity and for it to fail -- much less wasted data overhead.
    Last edited by deathshadow; Mar 13th, 2018 at 04:11 PM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  7. #7
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Once again please excuse me Jason. That is the url that my CMS uses to display the page in the administration window. You are correct it should be /assets/scripts/modules/map-data.htm.

  8. #8
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I found part of the problem was the name I gave the property on the polygon as it was created was polygon.name instead of polygon.myname, of which it was testing against. I still have an issue though. For some reason when I call gmarkers.push(polygon) it adds two objects into the gmarkers array, so there are two items in the ADA Accessible filtered list in the legend. Do you know what could be causing this? I've updated the code on the server so you can see the issue.

  9. #9
    New Coder
    Join Date
    Sep 2004
    Posts
    63
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I found the issue, careless mistake. When I was processing the data file I had the call to the marker function outside of the if else statement, so even if there was a polygon object created, it also created a marker as well.

  10. #10
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,019
    Thanks
    3
    Thanked 430 Times in 419 Posts
    Those are all easy mistakes to make, bad copy/paste, typo, and improper nesting. Good to hear you got it sorted.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  11. #11
    New Coder
    Join Date
    Mar 2013
    Location
    Indiana
    Posts
    30
    Thanks
    1
    Thanked 7 Times in 7 Posts
    I disagree with comma delimited variable declaration, deathshadow. It is easier to maintain code when each variable is separately declared ( Ben Alman » Multiple var statements in JavaScript, not superfluous )

  12. #12
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,019
    Thanks
    3
    Thanked 430 Times in 419 Posts
    @Chrystyan, for me it's less code, gzips smaller, and matches the format I learned to code high level languages in originally (since I went straight from hand assembling machine language to Pascal). The "Wah wah, I have to keep track of my comma's" thing -- for me at least -- holds water like a steel sieve.

    The only argument that really holds up is that a good minifier will do it for you -- but at that point why not just do it right in the first bloody place?

    I also just find it clearer and easier to follow, but that could just be a part of my rabid indentation habits. The more text you have thrown in there that's pointless drivel the harder it is to follow -- see how I advocate the "only one <?php per file" approach to using PHP. ... and really think shorttags should be stricken from PHP in their entirety, along with other mental enfeeblement like heredoc and nowdoc! Just make it work like a REAL language!!!

    OF course Alman's article is card stacked, take his comment section where he misses the most obvious solution...

    Code:
    var 
    	// comment for foo
    	foo = 1,
    	// comment for bar
    	bar = 2;
    	// the all lined up just damned fine!!!
    So obvious an answer it could only have been omitted on purpose.

    SAME card stacking on object assignment:
    Code:
    var
    	foo = {
    		prop: 123
    	},
    	bar = {
    		prop: 456
    	};
    In fact most of his arguments fall apart if you just add one extra freaking linefeed and tab! Aka, how you format VAR in Pascal/Modula/Ada/"Wirth" family languages.

    Hence why whenever someone links to that article, my first reaction is like sitting in the third row when some derp in the front row starts flapping his yab about being in a inverted 4g negative dive with a MiG-28. First off there's no such thing as a MiG-28, and it goes downhill from there.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  13. Users who have thanked deathshadow for this post:

    Chrystyan (Mar 15th, 2018)


 

Tags for this Thread

Posting Permissions

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