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

Asked

Viewed 876 times

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 his Neighborhood, Municipality and City, based on this information I have to bring the next results in list format, so far so good, in the list there is a button "see map" and when the user click I want to open the map inside my site (on the same page) but there I do not know very well how to do or how to start this part.

javascript html5

  • You want to use Google map?

  • You can use the Simple Markers API from Google Maps. Link: https://developers.google.com/maps/documentation/javascript/examples/marker-simple

1 answer

7

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.

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.