asked on

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

Gary

That's old code you shouldn't be using

The new recommende version
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Gary

p.s.
You will need a new API key for v3 of Google Maps API

kaufmed

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.

Wilder1626

ASKER

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?

Gary

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

Wilder1626

ASKER

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

Gary

Code works fine, are you sure you have the javascript files in the folder

Wilder1626

ASKER

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

Gary

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.

Wilder1626

ASKER

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

Wilder1626

ASKER

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

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Wilder1626

ASKER

Thanks for your help. really appreciated

Now all working.