a good option is to use the API of google maps.
here you can see some tutorials and a working example:
http://www.princiweb.com.br/demos/google-maps-api-v3-busca-endereco-autocomplete/
sources: https://github.com/rodolfoprr/GoogleMapsAPIv3ProcuraEnderecoAutocomplete
basically what you need is to 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>
a div
<div id="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 mark one or several addresses.
You want to use Google map?
– Diego Zanardo
You can use the Simple Markers API from Google Maps. Link: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
– OnoSendai