How to implement a map showing the units of a particular store on a site

2

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.

    
asked by anonymous 12.08.2014 / 15:06

1 answer

7

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.

    
12.08.2014 / 15:26