Home/ Questions/Q 6946719
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:36:05+00:00

I have inherited an old script and have to get it working. When I

  • 0

I have inherited an old script and have to get it working. When I run the HTML file locally it all works fine. But it won’t work when it’s hosted on a ULR.

When working correctly (locally) the script takes a street address and converts it to longitute and latitude, putting a marker on the map in the right place. It then allows the user to move the marker, updating the coords.

When working incorrectly (hosted) the script will not update the map, and it fails to fetch the correct coords for the supplied address.

I feel sure it’s something simple as it works perfectly until I move it to the hosted URL.

The hosted URL is at http://bvcb.bluecubevillage.com/gmap.html and a zipped version (for download) is at http://bvcb.bluecubevillage.com/gmap.zip

I’m also pasting the source below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Basic Google Map example</title>
    <style type="text/css">
        <!--
        body,div,h1,h2,p,form {
        font-family: verdana,arial,helvetica,sans-serif;
        font-size:10px;
        }
        .formcontainer {
        width:60%;
        }
        form div {

        }
        dl {
        }
        dt {
        float: left;
        clear: left;
        width: 65px;
        text-align: right;
        }
        dd {
        margin: 0 0 0 75px;
        padding: 0 0 0.5em 0;
        }
        label {
        line-height: 18px;
        }
        input[type=submit]{

        }
        h1{
        font-size:12px;
        padding:0;
        margin:20px 0 10px 0;
        }
        p.instructions{
        font-weight: bold;
        }
        -->
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyCYI244v8KiuklwZ_1Y1ce9f5r0WoSkJTk"
    type="text/javascript"></script>

    <script type="text/javascript">
        function returnCoords(){
        parent.document.getElementById('longitude').value = document.getElementById('longBox').value;
        parent.document.getElementById('latitude').value = document.getElementById('latBox').value;
        parent.TINY.box.hide();
        }
        //<![CDATA[ 
        var map = null;
        var geocoder = null;    
        function load() {
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(35.460670, -41.835938), 2); 
            map.addControl(new GSmallMapControl()); // ADD CONTROL FOR PAN AND ZOOM
            map.addControl(new GMapTypeControl()); // ADD CONTROL FOR MAP/SAT/HYBRID VERSIONS       
            geocoder = new GClientGeocoder();
            //GEvent.addListener(map, "moveend", function() {
            //  makeCoords();
            //});   
            var newcenter = map.getCenter();
            var marker = new GMarker(newcenter, {draggable: true});
            GEvent.addListener(marker, "dragend", function(){  
            mynewCenter = marker.getPoint();
            zoomLevel = map.getZoom();
            map.setCenter(mynewCenter, zoomLevel);
            makeCoords();
            clearBoxes();
            }); 
            map.addOverlay(marker);             
        }
        }

        function showAddress(address, city, country) {
        var fulladdress;
        // make sure the Geocoder only picks up city/country if nothing else available
        if ((address=="") || (city=="") || (country =="")){
            fulladdress = address;   
        }
        else {
            fulladdress = address + ' ' + city + ' ' + country;
        }
        if (geocoder) {
            // test if full address exists
            geocoder.getLatLng(fulladdress, function(point) { 
            if (!point) {
                // test if city exists
                geocoder.getLatLng(city, function(point1) {
                if (!point1) {
                    // test if country exists
                    geocoder.getLatLng(country, function(point2) {
                    if (!point2) {
                        //point2 = '(35.460670, -41.835938)';
                        //map.setCenter(point2, 3);
                        var newcenter = map.getCenter();
                        var marker = new GMarker(newcenter, {draggable: true});
                        GEvent.addListener(marker, "dragend", function(){  
                        mynewCenter = marker.getPoint();
                        zoomLevel = map.getZoom();
                        map.setCenter(mynewCenter, zoomLevel);
                        makeCoords();
                        clearBoxes();
                        }); 
                        map.addOverlay(marker);               
                    }
                    else {
                        map.setCenter(point2, 3);
                        var marker = new GMarker(point2, {draggable: true});
                        GEvent.addListener(marker, "dragend", function(){  
                        mynewCenter = marker.getPoint();
                        zoomLevel = map.getZoom();
                        map.setCenter(mynewCenter, zoomLevel);
                        makeCoords();
                        clearBoxes();
                        });                   
                        map.addOverlay(marker);
                    }
                    }
                );                    
                } 
                else {
                    map.setCenter(point1, 12);
                    var marker = new GMarker(point1, {draggable: true});
                    GEvent.addListener(marker, "dragend", function(){  
                    mynewCenter = marker.getPoint();
                    zoomLevel = map.getZoom();
                    map.setCenter(mynewCenter, zoomLevel);
                    makeCoords();
                    clearBoxes();
                    });               
                    map.addOverlay(marker);
                }
                }
            );            
            } 
            else {
                map.setCenter(point, 14);
                var marker = new GMarker(point, {draggable: true});
                GEvent.addListener(marker, "dragend", function(){  
                mynewCenter = marker.getPoint();
                zoomLevel = map.getZoom();
                map.setCenter(mynewCenter, zoomLevel);
                makeCoords();
                clearBoxes();
                });           
                map.addOverlay(marker);
                // marker.openInfoWindowHtml(fulladdress);
            }
            }
        );
            makeCoords();
        }
        }
        function makeCoords() {
        var center = map.getCenter();
        var myCenterString = new String(center);
        var myCenterArray = tidyUp(myCenterString);
        zoomLevel = map.getZoom();
        document.myform1.latBox.value = myCenterArray[0];
        document.myform1.longBox.value = myCenterArray[1];
        //document.myform1.zoomBox.value = zoomLevel;
        }
        function clearBoxes (){
        document.myform.myaddress.value = "";
        document.myform.mycity.value = "";
        document.myform.mycountry.value = "";
        }
        function tidyUp(string){
        string = '' + string;
        splitstring = string.split(" ");
        string = unsplitit(splitstring); 
        splitstring = string.split("(");
        string = unsplitit(splitstring); 
        splitstring = string.split(")");
        string = unsplitit(splitstring);   
        splitstring = string.split(",")
        for(i = 0; i < splitstring.length; i++){
            splitstring[i] = parseFloat(splitstring[i]);
            splitstring[i] = splitstring[i].toFixed(6); // 6 decimal places only
        }
        return splitstring;
        }
        function unsplitit(tarray){
        var tstring = "";
        for(i = 0; i < tarray.length; i++){
            tstring += tarray[i];
        }  
        return tstring;
        }       
        //]]>
    </script>
    </head>
    <body onload="load()" onunload="GUnload()">
    <div id="map" style="width:600px; height:400px"></div>
    <div style="width:300px;float:left;">
        <h1>Enter location details here</h1>
        <form action="#" name="myform" id="myform" onsubmit="showAddress(this.myaddress.value, this.mycity.value, this.mycountry.value); return false">
        <dl>

            <dt><label for="myaddress">Address:</label></dt>
            <dd><input type="text" size="20" name="myaddress" value="" /></dd>

            <dt><label for="mycity">City:</label></dt>
            <dd><input type="text" size="20" name="mycity" value="" /></dd>

            <dt><label for="mycountry">Country:</label></dt>
            <dd><input type="text" size="20" name="mycountry" value="" /></dd>

        </dl>
        <dt>&nbsp;</dt><dd><input type="submit" value="Get Co-ordinates" /></dd>
        </form>
    </div>
    <div style="width:290px;float:left">
        <h1>Enter/Retrieve Geocodes here</h1>
        <form name="myform1" id="myform1">
        <dl>

            <dt><label for="myaddress">Latitude:</label></dt>
            <dd><input type="text" id="latBox" size="10" /></dd>

            <dt><label for="myaddress">Longitude:</label></dt>
            <dd><input type="text" id="longBox" size="10" /></dd>

            <dt>&nbsp;</dt><dd>You may drag the location icon to refine location</dd>
            <dt>&nbsp;</dt><dd><button onclick="returnCoords()">Click to Finish</button></dd>

        </dl>
        </form> 
    </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The best solution is upgrade to API v3. This solution works. I used this in an iframe modal window, hence the function to return the coords to fields in the parent window.
    cd

    GeoMap

            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="/js/map-init.js"></script>
        <script type="text/javascript">
            function returnCoords(){
                parent.document.getElementById('longitude').value = document.getElementById('lng').value;
                parent.document.getElementById('latitude').value = document.getElementById('lat').value;
                parent.TINY.box.hide();
            }
        </script>
        <style type="text/css">
            <!--
            body,div,h1,h2,p,form {
                font-family: verdana,arial,helvetica,sans-serif;
                font-size:10px;
            }
            .formcontainer {
                width:60%;
            }
            form div {

            }
            dl {
            }
            dt {
                float: left;
                clear: left;
                width: 65px;
                text-align: right;
            }
            dd {
                margin: 0 0 0 75px;
                padding: 0 0 0.5em 0;
            }
            label {
                line-height: 18px;
            }
            input[type=submit]{

            }
            h1{
                font-size:12px;
                padding:0;
                margin:20px 0 10px 0;
            }
            p.instructions{
                font-weight: bold;
            }
            -->
        </style>
    </head>
    <body>

        <div id="the-map" style="width:600px; height:400px"></div>

        <div style="width:300px;float:left;">
            <h1>Enter location details here</h1>
            <form action="" name="myform" id="myform" onsubmit="codeAddress(); return false">
                <dl>
                    <dt><label for="add1">Address:</label></dt>
                    <dd><input type="text" size="20" name="add1" id="add1" value="" /></dd>

                    <dt><label for="town">City:</label></dt>
                    <dd><input type="text" size="20" name="town" id="town" value="" /></dd>

                    <dt><label for="postcode">Postcode:</label></dt>
                    <dd><input type="text" size="20" name="postcode" id="postcode" value="" /></dd>
                </dl>
                <dt>&nbsp;</dt><dd><input type="submit" value="Get Co-ordinates" /></dd>
            </form>
        </div>
        <div style="width:290px;float:left">
            <h1>Enter/Retrieve Geocodes here</h1>
            <form name="myform1" id="myform1">
                <dl>
                    <dt><label for="lat">Latitude:</label></dt>
                    <dd><input type="text" id="lat" size="10" /></dd>

                    <dt><label for="lng">Longitude:</label></dt>
                    <dd><input type="text" id="lng" size="10" /></dd>

                    <dt>&nbsp;</dt><dd><b>You may drag the location icon to refine location</b></dd>
                    <dt>&nbsp;</dt><dd><button onclick="returnCoords()">Click to Finish</button></dd>
                </dl>
            </form> 
        </div>




    </body>
</html>

    And here is the javascript I used with it:

    var map;
var geocoder;
var marker;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(54.594,-5.930);
    //var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("the-map"),myOptions);
}

$(document).ready(function(){
    initialize();
    var loc =  new google.maps.LatLng(54.594,-5.930);
    map.setCenter(loc);
    marker = new google.maps.Marker({
        position: loc, 
        map: map,
        draggable:true
    });

    google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerPosition(marker.getPosition());
    });

});

function updateMarkerPosition(latLng) {
    // use .toFixed(5) to limit to 5 digits
    document.getElementById('lat').value=latLng.lat();
    document.getElementById('lng').value=latLng.lng();
}


function codeAddress() {
    //var name = document.getElementById("name_long").value;
    var add1 = document.getElementById("add1").value;
    //var add2 = document.getElementById("add2").value;
    var town = document.getElementById("town").value;
    //var county = document.getElementById("county").value;
    var postcode = document.getElementById("postcode").value;

    var address = add1+"  "+town+" "+postcode;

    geocoder.geocode( {
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            map.setZoom(16);
            marker.setPosition(results[0].geometry.location);
            var lat = results[0].geometry.location.lat();
            var lng = results[0].geometry.location.lng();
            $("#lat").val(lat);
            $("#lng").val(lng);
        }
        else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}
    • 0