angularJS: Google Karte lädt nicht für Orte API

Question

fellas!

Ich versuche, Google Map zu integrieren und Places API zu verwenden. Ich habe eine Textbox und eine Google-Map (die aus einigen seltsamen Gründen nicht geladen wird) und ich versuche, die Adresse einzugeben, die in der Textbox in der Google-Karte mit Hilfe der Orts-API eingegeben wird.

Aber google map lädt nicht und es wirft auch keine Fehler in der Konsole. Places API funktioniert gut, ich kann nach Adressen suchen und bekomme auch die Koordinaten zurück, aber ich kann die Google Map nicht sehen oder an dieser Stelle eine Markierung hinzufügen.

Hier ist mein HTML-Code:

<div ng-app="myApp" ng-controller="myMap"> 
<div class="form-group" > 
    <label for="source_point"> 
    <h2>Address</h2></label> 
    <input type="text" id="source_point" name="source_point" class="form-control" placeholder="Enter your pick up address here"> 

    <p id="pickup_location"></p> 
    <input type="text" id="src_lat" name="src_lat" placeholder="latitude"> 
    <input type="text" id="src_long" name="src_long" placeholder="longitude"> 
</div> 
<!-- Map div --> 
<div id="source_map"></div> 
</div> 

Hier ist mein Controller:

angular.module('myApp', []). 
controller('myMap', function() { 

    var map; 
    var marker; 
    var latLngC; 

    function initialize() { 
    latLngC = new google.maps.LatLng(14.5800, 121.0000); 
    var mapOptions = { 
     center: latLngC, 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }; 

    map = new google.maps.Map(document.getElementById('source_map'), 
     mapOptions); 

    var marker = new google.maps.Marker({ 
     position: latLngC, 
     map: map, 
     draggable: true 
    }); 

    //Add marker upon clicking on map 
    //google.maps.event.addDomListener(map, 'click', addMarker); 
    google.maps.event.addDomListener(map, 'click', function() { 
     addMarker(map); 
    }); 

    var places1 = new google.maps.places.Autocomplete(document.getElementById('source_point')); 
    google.maps.event.addListener(places1, 'place_changed', function() { 
     var place1 = places1.getPlace(); 

     var src_addr = place1.formatted_address; 
     var src_lat = place1.geometry.location.lat(); 
     var src_long = place1.geometry.location.lng(); 

     var mesg1 = "Address: " + src_addr; 
     mesg1 += "\nLatitude: " + src_lat; 
     mesg1 += "\nLongitude: " + src_long; 
     //alert(mesg1); 

     document.getElementById('src_lat').value = src_lat; 
     document.getElementById('src_long').value = src_long; 
     document.getElementById('pickup_location').innerHTML = src_lat + ' , ' + src_long; 
    }); 
    //Add marker upon place change   
    google.maps.event.addDomListener(places1, 'place_changed', function() { 
     addMarker(map); 
    }); 

    } 
    google.maps.event.addDomListener(window, 'resize', initialize); 
    google.maps.event.addDomListener(window, 'load', initialize); 

    //Function to add marker upon clicking on a location in map 
    function addMarker(map) 
    { 
    var lat = document.getElementById('src_lat').value; 
    var loong = document.getElementById('src_long').value; 
    if (!lat || !loong) return; 

    var coordinate = new google.maps.LatLng(lat, loong); 
    if (marker) 
    { 
     //if marker already was created change positon 
     marker.setPosition(coordinate); 
     map.setCenter(coordinate); 
     map.setZoom(18); 
    } 
    else 
    { 
     //create a marker 
     marker = new google.maps.Marker({ 
     position: coordinate, 
     map: map, 
     draggable: true 
     }); 
     map.setCenter(coordinate); 
     map.setZoom(18); 
    } 
    } 

}); 

ich eine Geige geschaffen haben auch zu zeigen, wie dieses Ding funktioniert: Werfen Sie einen Blick auf sie aus here .

Answer 1

Sie verwenden #gmap anstelle von source_map. Werfen Sie einen Blick here

Hier ist Ihre feste css:

#source_map { 
    width: 450px; 
    height: 450px; 
}