Amelia Earheart Amelia Earheart - 5 months ago 27
AngularJS Question

angularJS: Google map not loading for places API

fellas!

I'm trying to integrate google map and use Places API.
I have a textbox and a google map (which is not loading for some bizarre reasons) and I'm trying to plot the address entered in the textbox in the google map with the help of places API.

But, google map is not loading and it's not throwing any errors in the console as well. Places API is working fine, I can search for addresses andI also get the coordinates back but I cannot see the google map or add a marker to that position.

Here's my 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>


Here's my 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);
}
}

});


I have created a fiddle as well to show how this thing works: Take a look at it from here.

Answer

You are using #gmap instead of source_map. Take a look here

Here's your fixed css:

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