• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 150
  • Last Modified:

JavaScript - Stack over flow on row 12 issue

Hi

I'm doing my first JavaScrit test as a beginner.

On the below script, i have an stack overflow on row 12.

What is an overflow and how can i remove the error?

Thanks.

<BODY>

<!--Insert your API key instead of text YourAPIkeyHERE-->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YourAPIkeyHERE" 
type="text/javascript">
</script>
<script type="text/javascript">
// <![CDATA[
var p_map_map;
var p_map_marker;
function p_map_sm(map, options)
{
var marker=new GMarker(new GLatLng(options.lt, options.ln), options.o ? options.o : null);
    map.addOverlay(marker);
    if(options.i)
    {
        GEvent.addListener(marker, "mouseover", 
            function() 
            { 
                marker.openInfoWindowHtml(options.i); 
            }
        );
        GEvent.addListener(marker, "mouseout", 
            function() 
            { 
                map.closeInfoWindow(); 
            }
        );
    }
    if(options.lk)
    GEvent.addListener(marker, "click", 
        function() 
        { 
            var w; 
            if(!options.t || !(w = window.open(options.lk, options.t)) || !w.top) 
            { 
                window.location=options.lk;
            }
        } 
    );
}
function p_map_mapload()
{
    //checking compatability
    if(GBrowserIsCompatible())
    {
        //creating map object in div with id="p_map_map"
        p_map_map = new GMap2(document.getElementById("p_map_map"));
        p_map_map.addControl(new GLargeMapControl());
        p_map_map.addControl(new GScaleControl());
        p_map_map.addControl(new GMapTypeControl());
        //setting map center and zoom
        p_map_map.setCenter(new GLatLng(56.8610816, 24.3660383), 9);
        //setting map type
        p_map_map.setMapType(G_NORMAL_MAP); 
        GEvent.addListener(p_map_map, "click", 
            function(marker, point)
            { 
                if(marker!=null) return false; 
                c=new GLatLng(point.lat(), point.lng()); 
                p_map_map.panTo(c); 
                l=document.getElementById("p_map_latitude"); 
                l.value=c.lat(); 
                l=document.getElementById("p_map_long"); 
                l.value=c.lng(); 
        
                if (typeof p_map_marker == "undefined") 
                {
                    p_map_marker = new GMarker(c, { draggable: true  });
                    GEvent.addListener(p_map_marker, "dragend", 
                        function(marker) 
                        { 
                            var point=p_map_marker.getPoint(); 
                            var c=new GLatLng(point.lat(), point.lng()); 
                            p_map_map.panTo(c); 
                            l=document.getElementById("p_map_latitude"); 
                            l.value=c.lat(); 
                            l=document.getElementById("p_map_long"); 
                            l.value=c.lng(); 
                            p_map_marker.setPoint(c); 
                        }
                    );
                    p_map_map.addOverlay(p_map_marker);
                }
                else
                {
                    p_map_marker.setPoint(c); 
                }
            }
        );
        GEvent.addListener(p_map_map, "zoomend", 
            function(oldlevel, newlevel) 
            { 
                l=document.getElementById("p_map_zoom"); 
                l.value=newlevel; 
            }
        );
        GEvent.addListener(p_map_map, "maptypechanged", 
            function() 
            { 
                l=document.getElementById("p_map_map_type"); 
                t=p_map_map.getCurrentMapType(); 
                if(t==G_NORMAL_MAP)
                { 
                    l.value="Normal"; 
                }
                else if(t==G_SATELLITE_MAP) 
                {
                    l.value="Satellite"; 
                }
                else if(t==G_HYBRID_MAP) 
                {
                    l.value = "Hybrid"; 
                }   
            }
        );
        //setting markers
        var p_map_marker1=p_map_sm(p_map_map,
            {
                //latitude
                lt:56.9451614437957,
                //longitude
                ln:24.1074371337891,
                //tooltip title
                o:{title:'Riga'},
                //link style title
                i:'Riga',  
                //link where to go when marker clicked
                lk:'http://www.riga.lv',
                //link target
                t:'_blank'
            }); 
        var p_map_marker2=p_map_sm(p_map_map,
            {
                lt:56.6484159,
                ln:23.713941,
                o:{title:'Jelgava'},
                i:'Jelgava',  
                lk:'http://www.jelgava.lv/',
                t:'_blank'
            }); 
        var p_map_marker3=p_map_sm(p_map_map,
            {
                lt:46.9532621931753,
                ln:1.0986328125,
                o:{title:''},
                i:'France',  
                lk:'',
                t:'_blank'
            }); 
        var p_map_marker4=p_map_sm(p_map_map,
        {
            lt:37.4678842833227,
            ln:-98.7890625,
            o:{title:''},
            i:'North america',  
            lk:'',
            t:'_blank'
        }); 
    }
}
function find_address(val)
{
//creating new
var g = new GClientGeocoder(); 
var c = ''; 
g.getLatLng(document.getElementById("address").value + ", " , function(c) 
{ 
    if(c) 
    { 
        if (typeof p_map_marker == 'undefined') {
            p_map_marker = new GMarker(c, { draggable: true  });
            GEvent.addListener(p_map_marker, 'dragend', function(marker) 
            { 
                var point=p_map_marker.getPoint(); 
                var c=new GLatLng(point.lat(), point.lng()); 
                p_map_map.panTo(c); 
                l=document.getElementById('p_map_latitude'); 
                l.value=c.lat(); 
                l=document.getElementById('p_map_long'); 
                l.value=c.lng(); 
                p_map_marker.setPoint(c);  
            });
            p_map_map.addOverlay(p_map_marker);
        }
        p_map_map.setCenter(c); 
        p_map_marker.setPoint(c); 
        document.getElementById('p_map_long').value=c.lng();
        document.getElementById('p_map_latitude').value=c.lat();
    } 
} ); ; 
return true;
}

function set_center_lat(val)
{
    if(!isNaN(parseFloat(val))) 
    { 
        c=p_map_map.getCenter(); 
        p_map_map.setCenter(new GLatLng(parseFloat(val), c.lng())); 
        p_map_marker.setPoint(p_map_map.getCenter()); 
    }
}
function set_center_lon(val)
{
    if(!isNaN(parseFloat(val))) 
    { 
        c=p_map_map.getCenter(); 
        p_map_map.setCenter(new GLatLng(c.lat(), parseFloat(val))); 
        p_map_marker.setPoint(p_map_map.getCenter()); 
    }
}
//goint to specified location using latitude and longitude
function toLocation(golat, golon)
{
    loc=new GLatLng(golat, golon); 
    p_map_map.panTo(loc); 
}
window.onload = function () 
{ 
    //loading map
    p_map_mapload();    
}
window.onunload = function () 
{ 
    //unloading map
    GUnload();  
}
// ]]>
</script>
<form method="post" action="" name="maps_form">
<p>Enter address: <input type="text" name="address" id="address" size="60" />
<input type="button" name="locate_address" value="Find place" 
        onclick="find_address()" id="locate_address" /></p>
<!--div where map will be, div size will apply to map -->
<div style="width:600px; height:400px;" id="p_map_map"></div>
<p>Lat: <input type="text" name="lat" value="56.8610816" size="15" 
        onchange="set_center_lat(this.value)" id="p_map_latitude" readonly />
&nbsp;Lon: <input type="text" name="lon" value="24.3660383" size="15" 
        onchange="set_center_lon(this.value)" id="p_map_long" readonly />
</p>

Open in new window

0
Wilder1626
Asked:
Wilder1626
  • 6
  • 6
1 Solution
 
GaryCommented:
That's old code you shouldn't be using

The new recommende version
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
0
 
GaryCommented:
p.s.
You will need a new API key for v3 of Google Maps API
0
 
käµfm³d 👽Commented:
What is an overflow
An overflow is when you exceed in memory usage the amount of memory that was allocated to you by the system. Think about it like a stack of plates. You can continue to stack plates one on top of the other, but at some point the stack will become too top-heavy, and the whole stack will tip over, with your plates crashing down to the floor. This is kind of what happens when you use too much memory, except that instead of your plates breaking, your program (i.e. your script) crashes and ceases to run.

In my plate analogy, the point at which the last plate can be added to the stack before the next plate causes the crash would be the equivalent of how many plates the system said I could stack (i.e. how much memory was allocated), and the act of placing the very next plate on top of the stack causing the crash would be the overflow.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Wilder1626Author Commented:
I see thanks.

In my first post, i also have an option to move the mouse and it gives the actual latitude and longitude from that point.

How can i include this into the new recommended version?
0
 
GaryCommented:
For an easy way I would recommend a jquery plugin - saves brainache using Google's code

http://www.wimagguc.com/projects/jquery-latitude-longitude-picker-gmaps/
https://github.com/wimagguc/jquery-latitude-longitude-picker-gmaps

For the centering you can use the same function function set_center_lat(val){...} and HTML code as you have
0
 
Wilder1626Author Commented:
I tries to do as below but cant seems to see Google map.

Would you know why?

<!DOCTYPE html>
<html xmlns='https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places'>
<head>
	<title>Google Maps Latitude and Longitude Picker jQuery plugin</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="css/demo.css"/>

	<!-- Dependencies: JQuery and GMaps API should be loaded first -->
	<script src="js/jquery-1.7.2.min.js"></script>
	<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

	<!-- CSS and JS for our code -->
	<link rel="stylesheet" type="text/css" href="css/jquery-gmaps-latlon-picker.css"/>
	<script src="js/jquery-gmaps-latlon-picker.js"></script>
</head>
<body>

<form>

<style type="text/css">

	
</style>

	<script>

		$('#news-wrapper .blog').hide(0);
		$('#news-wrapper .newsletter').hide(0);

		$(document).ready(function() {

			$('#news-wrapper .newsletter').fadeIn(1000);

			var downloadRunning = false;

			function getNewBlogPost(lastId) {
				if (downloadRunning) { return; }
				++lastId;
				if (lastId<0) { lastId = 0; }
				if (lastId>5) { lastId = 5; }
				downloadRunning = true;
				$.ajax({
					type: 'GET',
					url: '/api/get_recent_posts',
					success: function(data) {
						$('#news-wrapper .blog A').attr('href', data.posts[lastId].url);
						$('#news-wrapper .blog A').html(data.posts[lastId].title);
						$('#news-wrapper .blog').fadeIn(1000);
						downloadRunning = false;
						setTimeout(function() { getNewBlogPost(lastId) }, 30000);
					},
					error: function(error) {
						$('#news-wrapper .blog').fadeIn(500);
						downloadRunning = false;
						--lastId;
						setTimeout(function() { getNewBlogPost(lastId) }, 60000);
					},
					dataType: 'json'
				});
			}
			getNewBlogPost(-1);

			function preloadImage(imageSrc) {
				var image = new Image();
				image.src = imageSrc;
			};

			preloadImage("/projects/wmg12/images/wmg12-nav-frederique-active.png");
			preloadImage("/projects/wmg12/images/wmg12-nav-about-active.png");
			preloadImage("/projects/wmg12/images/wmg12-nav-free-active.png");
			preloadImage("/projects/wmg12/images/wmg12-nav-rss-active.png");
			preloadImage("/projects/wmg12/images/wmg12-nav-twitter-active.png");

			function moveScroller() {
			    var move = function() {
			        var st = $(window).scrollTop();
			        var s1 = $("#header-wrapper");
			        var s2 = $("#news-wrapper");
			        if(st > 0) {
			            s1.css({
			                position: "fixed",
			                top: "0px"
			            });
			            s2.css({
			                position: "fixed",
			                top: "60px",
			                padding: "5px 0"
			            });
			        } else {
			            if(st <= 0) {
			                s1.css({
			                    position: "absolute",
			                    top: "0px"
			                });
			                s2.css({
			                    position: "absolute",
			                    top: "60px",
			                	padding: "25px 0"
			                });
			            }
			        }
			    };
			    $(window).scroll(move);
			    move();
			}

			moveScroller();
		});
	</script>

</pre>
	</div>

	<H2>Editable and selectable Latitude/Longitude values</H2>

	<div class="description">
		<ul>
			<li>You can set your own latitude, longitude and zoom values. The map shows your data after pressing the update button.</li>
			<li>You can still hide the Zoom field (or any other fields)</li>
		</ul>
		<br/><br/>
		Move the marker, double click on the map, search, or set new values to interact.
	</div>

	<fieldset class="gllpLatlonPicker">
		<input type="text" class="gllpSearchField">
		<input type="button" class="gllpSearchButton" value="search">
		<br/><br/>
		<div class="gllpMap">Google Maps</div>
		<br/>
		lat/lon:
			<input type="text" class="gllpLatitude" value="20"/>
			/
			<input type="text" class="gllpLongitude" value="20"/>
		zoom: <input type="text" class="gllpZoom" value="3"/>
		<input type="button" class="gllpUpdateButton" value="update map">
		<br/>
	</fieldset>

	<div class="code">
<pre>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1935308-1");
pageTracker._trackPageview();
} catch(err) {}</script>
	
</body>
</html>

Open in new window

0
 
GaryCommented:
Code works fine, are you sure you have the javascript files in the folder
0
 
Wilder1626Author Commented:
I'm not sure i follow you when you say: Code works fine, are you sure you have the javascript files in the folder

The only thing i have is the file in attachment:
TEST3.html
0
 
GaryCommented:
You are using the code from the link I gave you?
Did you download the code?
On that link page on the right hand side about halfway down is a link to download in zip format - you need to click that to get the files.
0
 
Wilder1626Author Commented:
I see. This is great. Thanks

I'm just wondering about the Satellite view or Map view option that does not show in the Map.

Let me take a look and i'm also trying to increase the map size also.

<!DOCTYPE html>
		<head>
		<title>Google Maps Latitude and Longitude Picker jQuery plugin</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<link rel="stylesheet" type="text/css" href="css/demo.css"/>
	
		<!-- Dependencies: JQuery and GMaps API should be loaded first -->
		<script src="js/jquery-1.7.2.min.js"></script>
		<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	
		<!-- CSS and JS for our code -->
		<link rel="stylesheet" type="text/css" href="css/jquery-gmaps-latlon-picker.css"/>
		<script src="js/jquery-gmaps-latlon-picker.js"></script>
	</head>
	<body>
	<form>
		<H2>Editable and selectable Latitude/Longitude values</H2>
	
		<div class="description">
			<ul>
				<li>You can set your own latitude, longitude and zoom values. The map shows your data after pressing the update button.</li>
				<li>You can still hide the Zoom field (or any other fields)</li>
			</ul>
			<br/><br/>
			Move the marker, double click on the map, search, or set new values to interact.
		</div>
	
		<fieldset class="gllpLatlonPicker">
			<input type="text" class="gllpSearchField">
			<input type="button" class="gllpSearchButton" value="search">
			<br/><br/>
			<div class="gllpMap">Google Maps</div>
			<br/>
			lat/lon:
				<input type="text" class="gllpLatitude" value="45.58758"/>
				/
				<input type="text" class="gllpLongitude" value="-73.62351"/>
			zoom: <input type="text" class="gllpZoom" value="16"/>
			<input type="button" class="gllpUpdateButton" value="update map">
			<br/>
		</fieldset>
	<pre>
	
	</pre>

		
	</body>
	</html>

Open in new window

0
 
Wilder1626Author Commented:
I have found this code example, but just don't understand where to out it. Are you able to guide me? After that, all will look perfect.  Thanks again
var map;
function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(45.518970, -122.672899),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  map.setTilt(45);
  map.setHeading(90);
}

Open in new window

0
 
GaryCommented:
If you want more granular control over the map then this plugin is probably more to your liking whilst still being relatively simple to use.

http://hpneo.github.io/gmaps/
0
 
Wilder1626Author Commented:
Thanks for your help. really appreciated

Now all working.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now