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);
// ...
}
Related
I use a google map with javaScript and my code is :
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-12.043333,-77.028333);
var myOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
google.maps.event.addListener(map, "mousedown", function (e) {
//lat and lng is available in e object
var latLng = e.latLng;
console.log(latLng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>`
The result of e.latLng is an empty object.
I tried to click the event, but the result is empty.
What should I do or change?
Your code is working fine :
Click on map and your coordinates will come in alert
Please check here
I would like to show a location on google map, but I don't know where is my wrong. not showing any thing :
<div id="map-canvas" style="width:100%; height:300px;">
</div>
.
.
.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// Google map
if ($('#map-canvas').length) {
var
GOOGLE_MAP_LAT = 40.7564971,
GOOGLE_MAP_LNG = -73.9743277;
var map,
service;
jQuery(function($) {
$(document).ready(function() {
var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setMap(map);
$('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
});
});
});
}
</script>
</body>
updated
my console messages :
Using //# to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.js:1:0
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.[Learn More] <unknown>
SyntaxError: expected expression, got '<' myjs.js:1:0
TypeError: $(...).position(...) is undefined
custom.js:308:20
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
I think you need include jquery library, because you are using $(document).ready(function() .
I have updated your code by adding jquery library. Please try the below code , hope it will work.
<div id="map-canvas" style="width:100%; height:300px;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// Google map
if ($('#map-canvas').length) {
var
GOOGLE_MAP_LAT = 40.7564971,
GOOGLE_MAP_LNG = -73.9743277;
var map,
service;
jQuery(function($) {
$(document).ready(function() {
var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setMap(map);
$('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
});
});
});
}
</script>
I need to find if there are any divs with class="map" in a page Code Pen Example.
If there are, and only in that case, load Google Maps API.
Then use it to load the maps into the divs using data attributes for lat and long values.
So I have the following:
<div class="map" data-long="51.5072" data-lat="0.1275">
Replace by map 1
</div>
<div class="map" data-long="74.0059" data-lat="40.7127">
Replace by map 2
</div>
I was considering using something like (this should be loaded only if map divs exist):
$.getScript('https://www.google.com/jsapi', function()
{
google.load('maps', '3', { other_params: 'sensor=false', callback: function()
{
}});
});
The code I would like to apply to each map is something like Google Maps Code:
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Thank You,
Miguel
See a solution for loading Google Maps API async:
https://stackoverflow.com/a/12602845/1491212
var gMapsLoaded = false;
window.gMapsCallback = function(){
gMapsLoaded = true;
$(window).trigger('gMapsLoaded');
}
window.loadGoogleMaps = function(){
if(gMapsLoaded) return window.gMapsCallback();
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
Then just do something like this :
$(document).ready(function(){
function initialize(){
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
$(window).bind('gMapsLoaded', initialize);
if($('.map').length){
window.loadGoogleMaps();
}
});
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.
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);