SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Threaded View

  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    error on jason parse

    Dear All

    I want display the map by taking lat and long values from database using php.

    For that I got this code from one site, but it is not working.

    I have less knowledge of JSON.

    HTML Code:
    <!DOCTYPE html>
     
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Google Maps Example</title>
            <style type="text/css">
                body { font: normal 14px Verdana; }
                h1 { font-size: 24px; }
                h2 { font-size: 18px; }
                #sidebar { float: right; width: 30%; }
                #main { padding-right: 15px; }
                .infoWindow { width: 220px; }
            </style>
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript">
            
                    
            var map;
             
            // Ban Jelacic Square - Center of Zagreb, Croatia
            var center = new google.maps.LatLng(45.812897, 15.97706);
    
             
            function init() 
            {
                 
                var mapOptions = {
                    zoom: 13,
                    center: center,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                 
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                             
            
                        
            makeRequest('locations.php', function(data) 
            {
                 
            var data = JSON.parse(data.responseText); // here it is giving the error when I checked in the browser console. please help me
             
            for (var i = 0; i < data.length; i++) 
            {
                displayLocation(data[i]);
            }
        });
                
            }
    
            
    function makeRequest(url, callback) {
        var request;
        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
            
        } else {
            request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
        }
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
               callback(request);
            }
        }
    
        request.open("GET", url, true);
        request.send();
    }
            
            
    function displayLocation(location) 
    {
    
    
             
        var content =   '<div class="infoWindow"><strong>'  + location.name + '</strong>'
                        + '<br/>'     + location.address
                        + '<br/>'     + location.description + '</div>';
         
        if (parseInt(location.lat) == 0) {
            geocoder.geocode( { 'address': location.address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                     
                    var marker = new google.maps.Marker({
                        map: map, 
                        position: results[0].geometry.location,
                        title: location.name
                    });
                     
                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.setContent(content);
                        infowindow.open(map,marker);
                    });
                }
            });
        } else {
            var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon));
            var marker = new google.maps.Marker({
                map: map, 
                position: position,
                title: location.name
            });
             
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(content);
                infowindow.open(map,marker);
            });
        }
            }        
        
    
            
        
            </script>
            
        </head>
        
        <body onload="init();">
             
            <h1>Places to check out in Zagreb</h1>
             
            <section id="sidebar">
                <div id="directions_panel"></div>
            </section>
             
            <section id="main">
                <div id="map_canvas" style="width: 70%; height: 500px;"></div>
            </section>
             
        </body>
    </html>
    Please help me out to resolve this issue, I will be grateful to you

    Thanks
    MD.Samiuddin
    Last edited by DaveMaxwell; Feb 19, 2013 at 07:43.


Bookmarks

Posting Permissions

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