In adddition to the JS and CSS from the Basic Map libraries, copy-paste the style <link> line below into your <head>, or into the <body> before the map loading script. This supplies Font-Awesome icons for use as markers.
Single Marker Example
This shows how to place a single marker on the map.
markers array object - This holds an array of marker information. Each marker includes a name that does not need to be unique. The data array requires a latitude and longitude, and an optional field for popup contents.
addMarkers - This function automatically adds markers to the map.
Marker with Popup Example
This shows how to place a marker on the map, and include a popup with some text. Works with single or multiple markers.
markers array object - The data array holds an optional third entry for popup contents. You can include HTML formatted information and links.
setMarkerOpen - This function sets a single marker's popup to be open on load, or whenever called. The second field in the function is the number of the marker in the array that you wish to open, and starts at 0.
Here we add multiple markers to the map. You can also add popups to all markers using the modifications in the popups example above. Note the use of the quickMarkersCenter function to find the center lat/lon of the marker group and the appropriate zoom level to display them all.
quickMarkersCenter - This function quickly finds the center between an array of multiple markers. It also returns a zoom level that matches the distance between the markers, and fits them within the bounds of a mobile sized map.
Other Marker Functions
For advanced uses, we also have some easy to use functions for removing makers, highighting, and more.
This function turns the marker blue for easy visibility among a group of markers. markerIndex should be the number of the marker, starting with 0. You can see an example of this on Wikiocity's Search Map
Removes the highlighting from above function.
Deletes a marker from the map. markers is the original array of markers supplied to addMarkers, and index is the marker number, starting with 0.
Animates a map bounce and pan from the map center to the specified location. obj is an object containing "lat", "lon", and "accuracy" as returned in our Search Api json object. view is the variable from the getView function.
You can see an example of this on Api.Wikiocity's Map
distanceInKM(lat1, lon1, lat2, lon2)
Returns the distance between two sets of latitude/longitude points in KM.
distanceInMI(lat1, lon1, lat2, lon2)
Returns the distance between two sets of latitude/longitude points in Miles.