Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Using maps on your site

Wednesday, March 6th, 2013 by Servage

There are plenty of map providers out there, and choosing one can seem difficult. Google Maps, Bing Maps, OpenStreetMaps, what to choose? Honestly I don’t know. However, the good news is that most providers give a great performance and good libraries to integrate your preferred mapping solution into your website quickly.

Leaflet is “An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps” and another example of how this is done quickly and nicely, with a good looking result and beautiful code.

Integration example

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);

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

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
    .openPopup();

Integrate a map on your page today!

Using maps on your site, 3.5 out of 5 based on 2 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.