API Google MAPS location from address

Use the GeoCode API.

Example:

link

Return the coordinates of Rio Branco Avenue in Rio de Janeiro:

{
   "results" : [
      {
         [...],
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : -22.8960696,
                  "lng" : -43.1737186
               },
               "southwest" : {
                  "lat" : -22.9147546,
                  "lng" : -43.1812468
               }
            },
            "location" : {
               "lat" : -22.9055697,
               "lng" : -43.1774453
            },
            "location_type" : "GEOMETRIC_CENTER",
            "viewport" : {
               "northeast" : {
                  "lat" : -22.8960696,
                  "lng" : -43.1737186
               },
               "southwest" : {
                  "lat" : -22.9147546,
                  "lng" : -43.1812468
               }
            }
         },
         "place_id" : "ChIJvxA4RV5_mQARIFeLysc-ZjY",
         "types" : [ "route" ]
      }
   ],
   "status" : "OK"
}

This API understands natural language; you can concatenate your database fields and use them in the address parameter.

Once you have the coordinates, you can use the Simple Markers API to display the map with the coordinate:

link

This is an example using one of the received coordinate pairs above:

window.onload = function() {
    var latlng = new google.maps.LatLng(-22.8960696, -43.1737186);
    var map = new google.maps.Map(document.getElementById('map'), {
        center: latlng,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'Set lat/lon values for this property',
        draggable: true
    });
    google.maps.event.addListener(marker, 'dragend', function(a) {
        console.log(a);
        var div = document.createElement('div');
        div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
        document.getElementsByTagName('body')[0].appendChild(div);
    });
};

#map {
  height: 300px;
  border: 1px solid #000;
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><divid="map"></div>

Yes, I recommend reading the API documentation and viewing the examples. I did not know anything about the API either, but using the examples I was able to implement something quite fast.

Binds in these examples:

link I believe you'll find everything you need.

Here is an example developed with angular.

Link project: link

App:

var app = angular.module("GoogleMapsCustom", ["uiGmapgoogle-maps"]);

Controller:

app.controller("GoogleMapsCustomController", function($scope) {
    $scope.map = { center: { latitude: -23.586172, longitude: -46.657085 }, zoom: 10};
    $scope.map.randomMarkers = [];
    var adressOfCustomer = [
                             ["BAZAR BARAO LTDA ME", "AV.JOAO XXIII,84-V.FORMOSA, SP"],                                          
                             ["MAGAZINE BELEZA CENTER LTDA", "AV DOS IGARAPES, 1571, SP"],                                                
                             ["ESTACIONAMENTO CARREIRA LTDA ME", "AV.SAPOPEMBA,3016 SAPOPEMBA, SP"],                                          
                             ["LUIS GONZAGA GARDINALI ME", "R.FREI CANECA,22 - CENTRO, SP"],                                             
                             ["A R NETTO", "R.ANTONIO GONCALVES TEIXEIRA, 53, SP"],                                     
                             ["O DONEGA MOJI MIRIM ", "R.BUTANTA, 17-PINHEIROS, SP"],                                               
                             ["MAGAZINE MISS ELEGAN LTDA", "R GOVERNADOR PEDRO DE TOLEDO 1021, SP"],                                   
                             ["O.Y.OKI & CIA.LTDA ", "R.JOSE BONIFACIO,60, SP"]
                         ];

    $scope.setMarkers = function(numberOfMarkers) {
        setLatitudeAndLongitudeByAdress(adressOfCustomer, $scope.map);
    };

    $scope.onMarkerClicked = function(marker){
        marker.showWindow = true;
        $scope.$apply();
    };
});

app.controller("InfoController", function($scope) {
    $scope.templateValue = 'hello from the template itself';
    $scope.clickedButtonInWindow = function() {
        var msg = 'clicked a window in the template!';
        $log.info(msg);
        alert(msg);
    }
});

function setLatitudeAndLongitudeByAdress(adressOfCustomer, map){
    var geocoder = new google.maps.Geocoder();

    angular.forEach(adressOfCustomer, function(value, key) {
        var adress = value[1];
        geocoder.geocode({ 'address': adress + ', Brasil', 'region': 'BR' }, function (results, status) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            var customer = value[0];
            var itemMap = {
                latitude : latitude,
                longitude : longitude,
                title : customer,
                id : key,
                adress : adress,
                date : "10/11/2015"
            };
            map.randomMarkers.push(itemMap);
        });
    });
}

function init(){

    var adressOfCustomer = [
        ["BAZAR BARAO LTDA ME", "AV.JOAO XXIII,84-V.FORMOSA, SP"],                                          
        ["MAGAZINE BELEZA CENTER LTDA", "AV DOS IGARAPES, 1571, SP"],                                                
        ["ESTACIONAMENTO CARREIRA LTDA ME", "AV.SAPOPEMBA,3016 SAPOPEMBA, SP"],                                          
        ["LUIS GONZAGA GARDINALI ME", "R.FREI CANECA,22 - CENTRO, SP"],                                             
        ["A R NETTO", "R.ANTONIO GONCALVES TEIXEIRA, 53, SP"],                                     
        ["O DONEGA MOJI MIRIM ", "R.BUTANTA, 17-PINHEIROS, SP"],                                               
        ["MAGAZINE MISS ELEGAN LTDA", "R GOVERNADOR PEDRO DE TOLEDO 1021, SP"],                                   
        ["O.Y.OKI & CIA.LTDA ", "R.JOSE BONIFACIO,60, SP"]
    ];

    var locationOfCustomer = getLatitudeAndLongitudeByAdress(adressOfCustomer);
    initializeMaps(locationOfCustomer);
}

Index.html

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Google Maps API v3: Busca de endereço e Autocomplete - Demo</title>
        <link rel="stylesheet" type="text/css" href="assets/css/custom.css">

       </head>
    <body ng-app="GoogleMapsCustom">

        <h1>Google Maps Multiple Marker Demo 123</h1>


        <div ng-controller="GoogleMapsCustomController" ng-init="setMarkers();">
            <ui-gmap-google-map center="map.center" zoom="map.zoom"> <ui-gmap-markers models="map.randomMarkers" coords="'self'" icon="'icon'" click="onMarkerClicked" doCluster="map.doClusterRandomMarkers"
                clusterOptions="map.clusterOptions" modelsbyref="true"> 
                <ui-gmap-windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
                    <div>
                        <p ng-non-bindable>{{title}} - endereço: {{adress}} visita: {{date}}<button type='button'>Incluir na Agenda</button></p>
                    </div>
                    </ui-gmap-windows> 
                </ui-gmap-markers> 
            </ui-gmap-google-map>
        </div>
    </body>
</html>