I need to make an application that shows the available units of a store on the map.
For example: There is a field where the user will enter their Neighborhood, City and City, based on this information I have to bring the next results in list format, so far so good, in the list has a "view map" button and when the user clicks I want to open the map inside my site (on the same page) but then I do not know very well how to do or how to start this part.
A good option is to use the google maps API .
Here you can see some tutorials and an example working:
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.