0
votes

I want to create an app that help user search great dining places in the city so that they can revisit again in the future. This app is my first fun project using leaflet. What i wish to do is to make the simple map and load marker from database in which the marker only appears when user query the places from category or search in the search bar. I did test the index pageand marker.js in JSFiddle but it only appears the map-wrap alongside search button, bar and category.

Marker.js

//now map reference the global map declared in the first line
map=L.map('map').setView(true)

//marker development

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy;<a href="http://openstreetmap.org">OpenStreetMap</a>
     contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom:18
     }).addTo(map);
    newMarkerGroup = new L.LayerGroup();
    map.on('click',addMarker);
 });

 //add group layer to map
 map.addLayer(search_group);

 //start to initiate adding marker
 function addMarker(e){
        // Add marker to map at click location; add popup window
        var newMarker = new L.marker(e.latlng).addTo(map);
    }

//create array
var marker= new Array();
function onMapClick(e){
    marker = new L.Marker(e.latlng,
{draggable: false});

//pushing items into array each by each and then add markers
function itemWrap(){
    for(i=0; i<items.length; i++){
        var LamMarker = new
    L.marker([items[i].lat,items[i].lon]);
        marker.push(LamMarker);
        map.addLayer(marker[i]);
    }
  }

 //create popup
  marker.bindPopup().openPopup();
  };

//add to map function with a popup that contains a link, which when clicked will have a popup of details and booking options
//this link will have as its id the latlng of the point
//this id will then be compared to when you click on one of your created markers 
map.on('click',function(e){
    var clickPositionMarker = L.marker([e.latlng.lat,e.latlng.lng],{icon:idMarker});
    clickArr.push(clickPositionMarker);
    mapLat = e.latlng.lat;
    mapLon = e.latlng.lng;
    clickPositionMarker.addTo(search_group).bindPopup().openPopup();

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

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

}

map.on('locationfound' , onLocationFound);

        //access it using markers[i]["id"]

I did test the index.html before and of course i uncomment the L.marker function and it works fine. Popup did appears. But when i test the, marker, put the comment on L.marker, only map-wrap and other css appears. PLease help me, i did review the doc, test quite lots but nothing appears. Someone please help me since i'm really new to leaflet

1

1 Answers

0
votes

You are throwing a new before the L.marker, which is not the format for this constructor.Notice the case difference on the m.It needs to be either L.marker(options) or new L.Marker(options). You only need new with a L.Marker style marker init. See http://leafletjs.com/reference.html#marker