We Keep Coding

Google Map - getting error while loading

In my website, when I'm doing the design the google map was worked. After the hosting it shows an error:
Oops! Something went wrong"
I tried to find the solution and found API key is missing. I had created a key with my personal Gmail account and added to footer place like below.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=my api key=google-map" type="text/javascript"></script>
But after that also it didn't work. below is my google map script in HTML and js.
//Google Map
var latitude = $('#google-map').data('latitude')
var longitude = $('#google-map').data('longitude')
function initialize_map() {
var myLatlng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 14,
scrollwheel: false,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var contentString = '';
var infowindow = new google.maps.InfoWindow({
content: '<div class="map-content"><ul class="address">' + $('.address').html() + '</ul></div>'
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize_map);
});
<div id="google-map" class="wow fadeIn" data-latitude="13.0938666" data-longitude="80.202357" data-wow-duration="1000ms" data-wow-delay="400ms"></div>

Google Maps Api not displaying map into div

This question has been asked a couple of times, but no response has worked for me. I tried to add width and height to container div
<div style="height:900px;width:1024px;">
Mapa
<div id="map" class="map"></div>
</div>
Tried either to add the domListener Event to google maps object or just using jquery document.ready function
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() { initialize(); });
I created this Jsfiddle to show my point, I know that I am missing the API key but this doesn't seems to be the problem.
I don't know what I am missing here. Any ideas?
I know that I am missing the api key
Snippet with code Below
function initialize(){
$(".map").each(function(){
var centerLat = 52.5230809;
var centerLong = 13.3999976;
console.log(centerLat);
console.log(centerLong);
var centerLatLong = new google.maps.LatLng(centerLat, centerLong);
var mapOptions = {
center: { lat: parseFloat(centerLat), lng: parseFloat(centerLong)},
zoom: 8,
scrollwheel: false,
draggable:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
console.log(map);
var marker = new google.maps.Marker({
position: centerLatLong,
map: map
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() { initialize(); });
<div style="height:900px;width:1024px;">
Mapa
<div id="map" class="map"></div>
</div>

You should add css to map div.
<div style="height:900px;width:1024px;">
Mapa
<div style="height:900px;width:1024px;" id="map" class="map"></div>
</div>

As #egvrcn 's answer. But why are you using .each() ? You want to use multiple maps ?
Yes ?
function initialize() {
$(".map").each(function () {
var $this = $(this);
// ...
var map = new google.maps.Map($this[0], mapOptions);
// ...
});
}
No ?, so do just...
function initialize() {
// ...
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// ...
}

missing the pin on google map

My map is missing the pin drop, I tried figuring out the api page but i cant seem to get the pin on my google map. here is my code so far. If anyone has any ideas on how to get that pin on there I would appreciate it.
<!-- GOOGLE MAPS -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>

That code is creating a map centered on lat 33.6676314, lng -117.6598071 and I'm pretty sure the map is showing fine. You haven't yet created any markers, so go on and make one. The code to achieve that, in its most basic form is
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: map
});
}
please note that the map property of a marker should point to whatever variable you named your map to. For example:
var AwesomeMap = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: AwesomeMap
});
Position can be any valid LatLng object or LatLng literal. The following, for example, is valid too
var newmarker= new google.maps.Marker({
position: {lat:33.6676314, lng:-117.6598071},
map: AwesomeMap
});

Check this out
http://www.x2tutorials.com/tutorials/google-maps-v3/using-map-markers.php
If this is not what you are trying to achieve, please elaborate on the problem you are facing

Google Map is not displaying with V3

I have wrote code which display marker on my location but when i have added marker.setmap method then map is not loaded where i am wrong
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=ABBByyyeessssf77Z6S8c-M-T3Ea2j-uFczWXFxKh0&sensor=true">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".contact_map .load").append("Loading Map...")
});
function initialize() {
$(".contact_map .load").empty();
var mapOptions = {
center: new google.maps.LatLng(22.722337, 75.881732),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
}
google.maps.event.addDomListener(window, 'load', initialize)
marker.setMap(map);
</script>
<div class="contact_container">
<div class="contact_image">
</div>
<div class="contact_map">
<p class="load"></p>
<div id="map_canvas"></div>
</div>
</div>

the variable marker only exists inside the initialize function, you can't use it outside. To do that, define this var outside of the function. Also, I don't see var myLatLng defined anywhere
var marker;
function initialize() {
//your other code code
marker = new google.maps.Marker({ //don't use the word 'var' in this line
position: myLatlng,
title:"Hello World!"
});
}
google.maps.event.addDomListener(window, 'load', initialize)
marker.setMap(map);

Google Maps: Overlay point not showing up

Hey guys hoping for a little help here.
First I created a working map here: http://leongaban.com/_stack/googlemaps/firstmap.html
Pointer is shown on the spot, however I needed to remove the Map | Satellite | Terrain buttons.
Digging a bit deeper I found an example here disablingDefaults. However I could not get the map to work using my google.map.js file and my API key. So I just used the script from Google's example page.
Now my 2nd map I have the Map view options removed, but cannot get an overlay to show up :(
http://leongaban.com/_stack/googlemaps/
Please Help!
Goals:
Use my Google maps API key
Remove the Map view option buttons
Put overlay pointer on the location.
Code for my first map with my google API 2 key:
<head>
<title>Test Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyAXsNu2EwRNqKJn9OmC19WPkEJFM0r6ALk&sensor=true"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
// var myOptions = {
// zoom: 16,
// center: new google.maps.LatLng(40.750159, -73.976473),
// disableDefaultUI: true,
// mapTypeId: google.maps.MapTypeId.ROADMAP
// }
// var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// var point = new GLatLng(40.750159, -73.976473);
// map.addOverlay(new GMarker(point));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(40.750159, -73.976473), 13);
map.setUIToDefault();
var myGeographicCoordinates = new GLatLng(40.750159, -73.976473)
map.addOverlay(new GMarker(myGeographicCoordinates));
// map.addOverlay(new GMarker(40.750159, -73.976473));
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>
UPDATED
WORKING CODE! THANKS STACKERS!!!
<head>
<title>Test Google Maps</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(40.750159, -73.976473),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myGeographicCoordinates = new google.maps.LatLng(40.750159, -73.976473);
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>

There's a problem with how you define your latLng objects.
new GLatLng(40.750159, -73.976473);
That was used with Google Maps Api v2. Now you're using the latest api(v3), and in new api, this is how you should do it:
new google.maps.LatLng(40.750159, -73.976473);
EDIT: After your edit, i see there are some problems with the marker. In API v3 this is how you make a new marker:
var marker = new google.maps.Marker({
map: map,
position: latLng
});
Following code sets a map, disables default UI, sets a marker and put it on the map;
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(40.750159, -73.976473),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myGeographicCoordinates = new GLatLng(40.750159, -73.976473);
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates
});
}

Now that you have moved to the v3 API, you want to change your marker creation code from:
map.addOverlay(new GMarker(myGeographicCoordinates));
to:
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});
If you want, you may also define a custom marker icon in the MarkerOptions that are passed to the marker constructor function and set the value equal to the path and name of an image file:
var marker = new google.maps.Marker({
map: map,
icon: "images/my-nice-marker.png",
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});