We Keep Coding

Google MAPS JS API doesn't load

I'm building a websites, that occupies the Google Maps JS API, but for some reason, the map stays white, but there's no error in the Google Chrome Console.
HTML code:
<div id="map-container-5" class="z-depth-1" style="height: 200px"></div>
<script src="https://maps.google.com/maps/api/js?key"></script>
JS code:
function myMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("map-container- 5"),mapProp);
}
I'm not really getting the point, why this is not working, as there's no error.
My kind of template was: https://www.w3schools.com/graphics/tryit.asp?filename=trymap_intro

If you want to simply show a map with your coordinates using the googleapi then do as follows. This will show the map with your lat and lng.
CSS:
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
The HTML
<div id="map"></div> /* Place on your page
And this BEFORE the /body tag with YOUR key
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
</script>
And the JS script which again is places about the /body
<script>
function initMap() {
// The location of Uluru
var uluru = {lat: 51.5087420, lng: -0.120850};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 10, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>

Your code is correct. You just need to call the myMap() function once it is defined.
Try running the snippet below. (Same as your code with an additional line for calling myMap() function.)
function myMap() {
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
};
var map = new google.maps.Map(document.getElementById("map-container-5"), mapProp);
}
myMap();
<div id="map-container-5" class="z-depth-1" style="height: 200px"></div>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyC7q_f_aMi9o-hoSl3PYSVHRlN99AU3nBg"></script>

The API key you used is W3Schools one! API keys are used for Google to ask for money when your map gets lots of views.
You can get your own API key at https://cloud.google.com/maps-platform/ but you also need to register your credit card (or a fake one).
Note that you don't need an API key if your project is local (not served via HTTP).
(Also you didn't call myMap, so be sure to add myMap() to the end of your code.)

first you have to get your own key for google maps api. then you need to correct the tag like this.Also you have to call your "myMap" function.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap" async defer></script>
you then want to replace "YOUR_API_KEY" in the code with your key.
and "myMap" with your function name which in this case is the same (myMap)

In your style try using a valid height and width, and be sure the div is visible at startup
<div id="map-container-5" class="z-depth-1" style="height: 200px; width:200px;"></div>
And try remove the last comma in mapProp
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5
};
Is not cleat how invoke the function myMap().. so try also using the code directly in
<script>
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5
};
var map=new google.maps.Map(document.getElementById("map-container- 5"), mapProp);
</script>
and check in your javascript console .. for error

How to manipulate Google Map after creation?

I should warn you that I am very new to website creation and Javascript. With that out of the way. Because of that I have a google map widget on a website I am creating. It has made the map creation really easy, but if I really need to I guess I could try at coding it myself. That aside, I would like to add buttons on the side of the map that will go to some markers I have created.
I am having difficulties getting the map object to manipulate it after its created. I can't seem to find what the widget calls the map object and so I just can't use the idea of making my map variable a global object.
I am just trying to change the default zoom to start with. Below is what what I am basically trying to do but whenever the code is executed, but my map turns into a gray box on my screen.
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
margin: 0 auto 0 auto;
}
</style>
</head>
<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<body>
<div id="map"></div>
<script>
function initMap() {
var map;
var myOptions = {
center: {lat: 40, lng: 50},
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, myOptions);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<script>
function newLocation(newLat, newLng) {
//var mymap = new google.maps.Map(document.getElementById('map'));
var mymap = document.getElementById('map');
mymap.setZoom(4);
}
</script>
<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="newLocation(45,88)">
<body>
</html>
Looking at the google developer tools I get this error
"Uncaught TypeError: mymap.setZoom is not a function." I think this means I am getting the map area not the map itself.
Therefore is it possible to grab an instance of the map so I could manipulate it?

Your not referencing the correct map variable that you create in initMap()
What I would change is make the map variable global, so all of your functions including newLocation() can access this map variable.
Your implementation is using mymap in the newLocation() function, this has access to the div container of the map, not the actual map object itself, which is why you can not change properties such as zoom.
Try structuring it something like so, so you have the correct reference to the map variable.
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
margin: 0 auto 0 auto;
}
</style>
</head>
<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
var myOptions = {
center: {lat: 40, lng: 50},
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, myOptions);
}
google.maps.event.addDomListener(window, 'load', init_map);
function newLocation(newLat, newLng) {
map.setZoom(4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="newLocation(45,88)">
<body>
</html>

How does the Google Maps API work with AngularJS?

How is it possible to use the Google Maps API with AngularJS?
I am using this code in my AngularJS app:
<style>
#googleMap {
width: 200px;
height: 200px;
}
</style>
<div id="googleMap"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script language="javascript">
var map;
function initialize() {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This code is in the view and not in the controller.
I have other functions in the view and they work, but google map is still not working.
This is the error I get in the browser console:
Error: google is not defined
#http://localhost:3000/js/jquery-1.11.2.min.js line 2 > eval:10:2
.globalEval/<#http://localhost:3000/js/jquery-1.11.2.min.js:2:2615
.globalEval#http://localhost:3000/js/jquery-1.11.2.min.js:2:2589
.domManip#http://localhost:3000/js/jquery-1.11.2.min.js:3:23105
.after#http://localhost:3000/js/jquery-1.11.2.min.js:3:21067
Cehttp://localhost:3000/js/angular/lib/angular.min.js:176:70
n#http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:5868
.compile/http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:6428
Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:128:120
p#http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:2649
this.$gethttp://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:3989
f/<#http://localhost:3000/js/angular/lib/angular.min.js:112:20
Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:125:301
Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:122:390
Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:126:56
l#http://localhost:3000/js/angular/lib/angular.min.js:81:169
S#http://localhost:3000/js/angular/lib/angular.min.js:85:301
vf/http://localhost:3000/js/angular/lib/angular.min.js:86:315
What am I doing wrong?
I searched the web but everyone seems to be using libraries like angular-google-map or ui-map. Why is no one using the direct API?

You can implement google maps in angularjs without using any plugins like this,
<!--use this div where ever you want to create a map-->
<div id="map"></div>
define the width and height for map div,
#map {
height:420px;
width:600px;
}
in controller you glue this id="map" with scope like this,
$scope.mapOptions = {
zoom: 4,
center: new google.maps.LatLng(41.923, 12.513),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), $scope.mapOptions);
if you want to create markers for the cities or countries you want,
var cities = "Atlanta, USA";
var geocoder= new google.maps.Geocoder();
$scope.markers = [];
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat(), info.lng())
});
}
geocoder.geocode( { 'address': cities }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
newAddress = results[0].geometry.location;
$scope.map.setCenter(newAddress);
createMarker(newAddress)
}
});
Last but not least make sure you added the google maps api script before doing all this stuff,
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
Here is the working plunker with this code, inside a bootstrap model,
http://embed.plnkr.co/VT7cO0L2ckSWG6g63TVG/preview
Reference
Hope this helps!

It was late to post but I have done this as solution. By this there is no need to add the google map script src in the head of the html or there is no chance of any error for google map src related errors. The script will be added automatically by the loadScript function. In angular it is needed to add new js src in partials rather than the head of main script. So I think this will be the best solution
I used this code chunk into my controller.
$scope.initialize = function() {
$scope.mapOptions = {
zoom: 8,
center: new google.maps.LatLng(22.649907498685803, 88.36255413913727)
};
$scope.map = new google.maps.Map(document.getElementById('googleMap'), $scope.mapOptions);
}
$scope.loadScript = function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.google.com/maps/api/js?sensor=false&callback=initialize';
document.body.appendChild(script);
setTimeout(function() {
$scope.initialize();
}, 500);
}
setTimeout is there because some time is needed for google map src to be downloaded and be ready. & callback=initialize is needed because by this google map will be ready for a callback.The main problem was that the code google.maps.event.addDomListener(window, 'load', initialize) was not executing if I add the google map src in partial rather than the head of main index.html. But this setup works flawlessly.
And this chunk to the html
<div class="form-group col-lg-12" id="googleMap">
<center>Waiting for the map...</center>
</div>
Now place ng-init="loadScript()" anywhere in any outer div so that loadScript initializes before.

Google Map call not working

So, I'm a little confused. I tried calling a google map with the api and tutorial provided here:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
But I seem to be unable to get it to work correctly, and my map div always ends up being a grey box.
Here's the html and js that I used. Please let me know if there is some sort of glaring error, or if I should be using another api...
<div id="map_canvas"></div>
...
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById("map_canvas");
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas);
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
my css is set to have the height and width be 300px and 500px respectively... if that matters to you personally.

I think your code doesn't use the options. I'm not sure that's THE problem, but that's A problem:
try:
var map = new google.maps.Map(map_canvas, mapOptions);

If you are looking for your map to appear, start with this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas" style="width:300;height:500">
<script>
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOpts = { mapTypeId: google.maps.MapTypeId.TERRAIN, zoom: 2, center: new google.maps.LatLng(20, 0) };
var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</div>
</body>
</html>

I think the main problem is the mapOptions is not included when the map is initialized.
it's supposed to be like this:
var map = new google.maps.Map(map_canvas, mapOptions);
~ try to read again the tutorial provided, it's defined that the 'center', 'zoom level', and 'map type' are required options.
Options for the map, such as the center, zoom level, and the map type.
There are many more options that can be set, but these three are required.

Google Maps API JavaScript and ZK

I am work in ZK and now I am need use the Google API maps. I have used this API in other framework sometimes.
I don't show the maps.
Firstly I thought the problem may be the css, but it isn't.
I added a initialize (maps) function to a event onLoad of windows but I had still the same problem. I debug the code in the browser with the js console and I seen that the window event load isn't available so I called the function initialize from the event load from the div (which contents the maps), again the js console showed the same message.
I use a directive
<div id="map_canvas" style="width: 320px; height: 480px;" xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="initialize()"></div>
But the div wasn't shown.
Finally I used a pure html element, using the html tag of ZK:
<html><![CDATA[
<div id="map_canvas" onload="initialize()" style="width: 320px; height: 480px;"/>
]]></html>
but the result in the js console is again
<div class="noscript"><p>Sorry, JavaScript must be enabled.<br/>Change your browser options, then try again.</p></div>
I'd like know way the function which shows the maps don't do it. I think the problem is the js but I am not sure, do anybody tell me if the problem is the js called please?
Thanks.
Edit:
I have used this way to do it (Thank you very much to Sean Connolly: How get the zk element id from js)
<zk>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">
</script>
<script type="text/javascript">
var map;
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(zk.Widget.$(jq('$map_canvas2')).$n(), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas2" style="width: 1320px; height: 1480px;" />

I think you want something like this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode({'address': address},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
alert(results[0].geometry.location.latlng[0]);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize();
</script>
<div id="map_canvas" style="width: 320px; height: 480px;" onClick="initialize()"></div>