A good option is to use the google maps API .
Here you can see some tutorials and an example working:
link
sources: link
basically what you need is import the javascript and css api
<link href="http://fonts.googleapis.com/css?family=Open+Sans:600" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
onediv
<divid="mapa"></div>
and initialize your map
function initialize() {
var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);
var options = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapa"), options);
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true,
});
marker.setPosition(latlng);
}
google.maps.event.addDomListener(window, 'load', initialize);
Using the api you can display the map of cities, states, countries, etc ... and select one or more addresses.