0

Can anybody give me some examples of adding multiple markers on the map?

closed as unclear what you're asking by PolyGeo, BradHards, Fezter, whuber Nov 1 '13 at 12:44

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    Could you provide some more details about your requirements, please? – PolyGeo Nov 1 '13 at 8:18
2

Please use the following code to add multiple markers with information window.

This example creates a vector layer for placing points which you can style with custom shapes or graphic markers.

<html>
<head>
    <script src="http://openlayers.org/dev/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, mappingLayer, vectorLayer, selectMarkerControl, selectedFeature;

        function onFeatureSelect(feature) {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.FramedCloud("tempId", feature.geometry.getBounds().getCenterLonLat(),
                                     null,
                                     selectedFeature.attributes.salutation + " from Lat:" + selectedFeature.attributes.Lat + " Lon:" + selectedFeature.attributes.Lon,
                                     null, true);
            feature.popup = popup;
            map.addPopup(popup);
        }

        function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }   

        function init(){
            map = new OpenLayers.Map( 'map');
            mappingLayer = new OpenLayers.Layer.OSM("Simple OSM Map");

            map.addLayer(mappingLayer);
            vectorLayer = new OpenLayers.Layer.Vector("Vector Layer", {projection: "EPSG:4326"}); 
            selectMarkerControl = new OpenLayers.Control.SelectFeature(vectorLayer, {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
            map.addControl(selectMarkerControl);

            selectMarkerControl.activate();
            map.addLayer(vectorLayer);
            map.setCenter(
                new OpenLayers.LonLat(0, 0).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject())

                , 1
            );    
        }

        function placeRandomMarker(){
            var randomLat = Math.floor((Math.random()*180)-90);
            var randomLon = Math.floor((Math.random()*180)-90);
            var randomLonLat = new OpenLayers.Geometry.Point( randomLon, randomLat);
            randomLonLat.transform("EPSG:4326", map.getProjectionObject());
            var randomFeature = new OpenLayers.Feature.Vector(randomLonLat,
                                    { salutation: "hello world", Lon : randomLon, Lat : randomLat});
            vectorLayer.addFeatures(randomFeature);
            var popup = new OpenLayers.Popup.FramedCloud("tempId", new OpenLayers.LonLat( randomLon, randomLat).transform("EPSG:4326", map.getProjectionObject()),
                       null,
                       randomFeature.attributes.salutation + " from Lat:" + randomFeature.attributes.Lat + " Lon:" + randomFeature.attributes.Lon,
                       null, true);
            randomFeature.popup = popup;
            map.addPopup(popup); 
        }


    </script>


</head>
<body onload="init()">

<div id="map" style="height:600px; width: 1000px;"></div>
<button onclick="placeRandomMarker()">Place Marker</button>
</body>
</html>

Or you can simply visit http://dev.openlayers.org/examples/markers.html I hope it will help.

Not the answer you're looking for? Browse other questions tagged or ask your own question.