CODEWITHSUNDEEP
javascripthtmlleafletopenstreetmap
Koez Zoro
Koez Zoro

Reputation: 31

Leaflet Map not appears at all

Index.html

<!DOCTYPE html>

    <title>BookSmart</title>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

</head>

<body>
    <h1>BookSmart</h1>

    <p>Here's a new BookSmart</p> 

  <div class="map-wrap">
    <div id="map" style="height: 440px; width: 1325px; border: 1px solid #AAA;"></div>
        </div>
    <div class="col-lg-6">
        <div class="input-group">
            <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Category</button>
            <input type="text" class="form-control" size="192" placeholder="Search a desired services...">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Search!</button>
                </span>
             </span>
         </div>
     </div>



    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '$copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            maxZoom: 18
        }).addTo(map);.

    </script>


    <script type="text/javascript">
    map.locate({setView: true ,maxZoom: 16});

    function onLocationFound(e) {
        var radius = e.accuracy / 2;

        L.marker(e.latlng, radius).addTo(map);
            .bindPopup("You are within " + radius + " meters from this point").openPopup();

        L.circle(e.latlng, radius).addTo(map);
    }

    map.on('locationfound', onLocationFound);

    function onLocationError(e) {
        alert(e.message);
    }

    map.on('locationerror', onLocationError);


    </script>

    <script type='text/javascript' src="leaflet/leafletembed.js"></script>
    <script type="text/javascript" src="maps/marker.json"></script>


    <script type='text/javascript' src="../marker/marker.js"></script>
    <script type='text/javascript' src="../map/maps.js"></script>


 </body>

I did test almost everything. When I make just a simple code containing only div id and tile layer, it did works but when i start to customize the code to become more interactive, nothing appears. This is what i get almost all of the time

This is the only result get. Could someone help me on this?

Upvotes: 0

Views: 497

Answers (1)

ghybs
ghybs

Reputation: 53185

You have several syntax errors in your first inline script block:

  • Missing comma (,) after the attribution string.
  • Extra dot (.) at the end of the tileLayer statement (after addTo(map);.)

And in the next inline script block:

  • Extra semicolon (;) at the end of marker statement first line but before the bindPopup (addTo(map);.bindPopup)

As suggested by @Jason, the browser console is one of the first debugging tool (hit F12 on most browsers to open the developers panel).

Upvotes: 3

Related Questions