Safe way to update javascript for polygons

This topic contains 9 replies, has 2 voices, and was last updated by  Gojo Paradiso 8 years, 6 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • February 15, 2017 at 7:58 am #361661

    Gojo Paradiso
    Free User
    Post count: 9

    Hello,

    I have polygons working with GeoDirectory but only by directly modifying goMap.min.js at column 16990 after this.overlay=new MyOverlay(this.map);
    I’m using Google’s simple polygon example below with the location centered on Kyoto, Japan.

    var triangleCoords=[{lat:34.996,lng:135.761},{lat:34.995,lng:135.771},{lat:34.989,lng:135.771},{lat:34.989,lng:135.761},{lat:34.996,lng:135.761}];var bermudaTriangle=new google.maps.Polygon({paths:triangleCoords,strokeColor:’#FF0000′,strokeOpacity:0.8,strokeWeight:4,fillColor:’#FF0000′,fillOpacity:0});bermudaTriangle.setMap(this.map);

    Is there a way to hook into JavaScript the same way as PHP with hooks and filters or is it possible to have access to this.map outside of the init function?

    Thank you.

    February 15, 2017 at 7:20 pm #361832

    Stiofan O’Connor
    Site Admin
    Post count: 22956

    Hello,

    You can try something like this:

    

    <script>
jQuery(function() {
    
// Define the LatLng coordinates for the polygon's path.
        var triangleCoords = [
          {lat: 25.774, lng: -80.190},
          {lat: 18.466, lng: -66.118},
          {lat: 32.321, lng: -64.757},
          {lat: 25.774, lng: -80.190}
        ];

        // Construct the polygon.
        var bermudaTriangle = new google.maps.Polygon({
          paths: triangleCoords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });
        bermudaTriangle.setMap(jQuery.goMap.map);

});

</script>
    

    Thanks,
    

    Stiofan
    

		
	
    


    

			
				

    

	
    

		February 16, 2017 at 6:43 am

		
		#361928

		
		
		
	
    


    


    

	
    

		
		
    Gojo Paradiso
    Free User
    
		
		
     Post count: 9
    
	
    

	
    

		
		
    Hi Stiofan,
    

    Thank you for the reply.
    

    I tried using jQuery.goMap.map in both the header and footer but logging the console jQuery.goMap.map is undefined and jQuery.goMap is an empty object.
    

    Is there another place I could call it where goMap is still visible?
    

    Thank you.
    

		
	
    


    

			
				

    

	
    

		February 16, 2017 at 7:51 pm

		
		#362098

		
		
		
	
    


    


    

	
    

		
		
    Stiofan O’Connor
    Site Admin
    
		
		
     Post count: 22956
    
	
    

	
    

		
		
    Did u wrap it in a document ready, it will be defined then?
    

    Stiofan
    

		
	
    


    

			
				

    

	
    

		February 17, 2017 at 6:06 am

		
		#362179

		
		
		
	
    


    


    

	
    

		
		
    Gojo Paradiso
    Free User
    
		
		
     Post count: 9
    
	
    

	
    

		
		
    Hi Stiofan,
    

    I’ve tried wrapping it in (document).ready and (window).load but on the /location/ page it’s always undefined, however, for some reason it works without anything but the script alone on /add-listing/?listing_type=gd_place page.
    

    I also tried wrapping it with google.maps.event.addListenerOnce(jQuery.goMap.map, ‘bounds_changed’, function(){ }); or with idle in place of bounds_changed and it gives me a TypeError or ReferenceError depending on if I try this.map, map, or goMap.map.
    

    Add-listing only has one default style marker on it but location has the GD style markers. Could there be something happening on the location page that causes goMap to be out of scope?
    

    Thank you.
    

		
	
    


    

			
				

    

	
    

		February 17, 2017 at 10:15 am

		
		#362208

		
		
		
	
    


    


    

	
    

		
		
    Stiofan O’Connor
    Site Admin
    
		
		
     Post count: 22956
    
	
    

	
    

		
		
    Are you talking about the location page or the “add listing page”?
    

    Stiofan
    

		
	
    


    

			
				

    

	
    

		February 18, 2017 at 4:59 am

		
		#362399

		
		
		
	
    


    


    

	
    

		
		
    Gojo Paradiso
    Free User
    
		
		
     Post count: 9
    
	
    

	
    

		
		
    It works on the add listing page and not the location page.
    

		
	
    


    

			
				

    

	
    

		February 20, 2017 at 6:29 am

		
		#362592

		
		
		
	
    


    


    

	
    

		
		
    Gojo Paradiso
    Free User
    
		
		
     Post count: 9
    
	
    

	
    

		
		
    Hi Stiofan,
    

    Could you try either of these scripts on the location page?
    

    

    <script>
jQuery(document).ready(function() {    
    // Define the LatLng coordinates for the polygon's path.
    var triangleCoords = [
        {lat: 34.996, lng: 135.761},
        {lat: 34.995, lng: 135.771},
        {lat: 34.989, lng: 135.771},
        {lat: 34.989, lng: 135.761},
        {lat: 34.996, lng: 135.761}
    ];

    // Construct the polygon.
    var bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 4,
        fillColor: '#FF0000',
        fillOpacity: 0
    });

    bermudaTriangle.setMap(jQuery.goMap.map);
    console.log(jQuery.goMap.map);
});
</script>
    

    

    <script>
jQuery(document).ready(function() {
google.maps.event.addListenerOnce(jQuery.goMap.map, 'bounds_changed', function(){
    // Define the LatLng coordinates for the polygon's path.
    var triangleCoords = [
        {lat: 34.996, lng: 135.761},
        {lat: 34.995, lng: 135.771},
        {lat: 34.989, lng: 135.771},
        {lat: 34.989, lng: 135.761},
        {lat: 34.996, lng: 135.761}
    ];

    // Construct the polygon.
    var bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 4,
        fillColor: '#FF0000',
        fillOpacity: 0
    });
    
    bermudaTriangle.setMap(jQuery.goMap.map);
    console.log(jQuery.goMap.map);
  });
});
</script>
    

    Thank you.
    

		
	
    


    

			
				

    

	
    

		February 20, 2017 at 2:24 pm

		
		#362668

		
		
		
	
    


    


    

	
    

		
		
    Stiofan O’Connor
    Site Admin
    
		
		
     Post count: 22956
    
	
    

	
    

		
		
    try this:
    

    

    <script>
jQuery(function() {
    
// Define the LatLng coordinates for the polygon's path.
        var triangleCoords = [
          {lat: 25.774, lng: -80.190},
          {lat: 18.466, lng: -66.118},
          {lat: 32.321, lng: -64.757},
          {lat: 25.774, lng: -80.190}
        ];

        // Construct the polygon.
        var bermudaTriangle = new google.maps.Polygon({
          paths: triangleCoords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });
        

setTimeout(function(){ 

jQuery.goMap.map.addListener('idle', function() {
    bermudaTriangle.setMap(jQuery.goMap.map);

  });

}, 10);

});

</script>
    

    Stiofan
    

		
	
    


    

			
				

    

	
    

		February 22, 2017 at 6:03 am

		
		#363080

		
		
		
	
    


    


    

	
    

		
		
    Gojo Paradiso
    Free User
    
		
		
     Post count: 9
    
	
    

	
    

		
		
    Hi Stiofan,
    

    Thank you for the response it’s mostly working now!
    

    setTimeout works if I set it to 3000ms but it seems to ignore the idle event until the map has been dragged.
    

    Thank you.
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 10 posts - 1 through 10 (of 10 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket
				

			

		

		
	
	


			

			


		
	


		

	

	


















	
	
			
			
			
			
                        
            
            
                
                

                    

                        20% Discount Offer
                        
                        
                    

                    

                        Hurry! Get your 20% discount before it expires.
                        Get 20% Discount