Documentation

Getting Started

Building more interactive maps with MapMarker.io is easy and a fairly straight forward process. To use our map markers in your project, you do not need to pay or register any api keys.

Just make sure that whatever you are building your maps with supports creating custom map markers from .png image files. Most web based mapping SDKs like Google Maps or Bing Maps support this out of the box. Take a closer look at our integrations section to learn more.

Font-Awesome (v5)

MapMarker.io now supports explicit Font Awesome versions to ensure you can build the markers that match your application. Since class names can vary from version to version, we have included a complete list of available icons in version v5.

Font-Awesome (v4)

MapMarker.io now supports explicit Font Awesome versions to ensure you can build the markers that match your application. Since class names can vary from version to version, we have included a complete list of available icons in version v4.

Map Markers (Legacy)

---

Integrations

Here are a few examples on how to add our custom markers to the maps you are already working with.

Bing Maps (Web)

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    credentials: 'Your Bing Maps Key'
});

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { 
    icon: 'https://cdn.mapmarker.io/api/v1/pin?icon=fa-star&size=50&hoffset=0&voffset=-1',
    anchor: new Microsoft.Maps.Point(12, 39)
});

map.entities.push(pushpin);

Google Maps (Web)

function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map-google'), {
        zoom: 4,
        center: uluru
    });
    
    // a more conventional map pin
    var marker = new google.maps.Marker({
        position: uluru,
        icon: 'https://cdn.mapmarker.io/api/v1/pin?icon=fa-star&size=50&hoffset=0&voffset=-1',
        map: map
    });
    
    // a square icon whose center is on the lat / long
    var circle = new google.maps.Marker({
        position: {lat: 37.827125, lng: -122.422844},
        map: map,
        icon: {
            size: new google.maps.Size(120, 120),
            scaledSize: new google.maps.Size(60,60),
            url: 'https://cdn.mapmarker.io/api/v1/fa?size=120&icon=fa-bullseye&color=%23D33115',
            anchor: new google.maps.Point(30, 30),
        },
        title: "Alert",
    });
    
}

Mapbox (Web)

var markerElement = document.createElement('div');
markerElement.style.backgroundImage = "url('https://cdn.mapmarker.io/api/v1/pin?icon=fa-star&size=50&hoffset=0&voffset=-1')";
markerElement.style.width = '50px';
markerElement.style.height = '50px';

var marker = new mapboxgl.Marker(markerElement, {offset: [-25, 50]})
    .setLngLat([-65.017, -16.457])
    .addTo(map);

---

Performance in Production Environments

MapMarker handles the demands of production applications right out of the box. Here is how we ensure that our markers are always available when your users need them.

Map Marker Life Cycle

To understand how MapMarker.io can handle high loads for very custom items, we are first going to talk about the lifecycle of the generated markers.

There are 2 lifecycle stages for any unique marker:

1. A marker that has never been requested ~300ms
   a common case during development as you are tweaking options
   
   
2. A marker that has been requested before ~50ms
   a common case during QA and production as you are retrieving markers generated in development.
   

The massive decrease in load time (~80%) is due to MapMarker's use of the Cloudflare CDN on the marker routes. Once a marker has been generated once, the resulting image is cached and distributed accross the Cloudflare Content-Delivery-Network and served directly from there to the client applications instead of being dynamically generated every time.

CDN Performance tested with Pingdom

~30ms Melbourne, Australia

~55ms Dallas, Texas

~41ms San Jose, California

~105ms Stockholm, Sweden