Using Google maps api inside div not working - javascript

I've been trying to add google maps to my page with no avail. My code works fine independently but when I add to a real webpage the map doesn't show at all.
<div id="map" style="width:100%;height:500px"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=initMap"
async defer></script>
And the page looks like this
As you can see, the div pops up but not the map. How would I get this to show?

Your myMap function has never been called. You can call it like,
function myMap() {
...
}
myMap();
or use callback parameter on the script..
<script async defer src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"> </script>
Edit
You're calling it wrong, it should be an &, not & in your script parameter. Try to change your code to,
<div id="map" style="width:500px;height:500px"></div>
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=myMap"> </script>
For more detail, check out this fiddle.
- Edit 2 -
I have no idea why you can't get it to work in your site. Since I could do it just fine.
Below are the script that I inject during runtime on the console in your site.
$('.content--body__wrapper').append('<div id="map" />')
$('#map').attr('style', 'width:500px; height:500px')
$('.content--body__wrapper').append(`<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>`);
$('.content--body__wrapper').append(`<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=initMap" async defer></script>`);
What I can tell from your screenshot is your initMap function does not get called. And I am not sure if it's the callback from google map since it provides no error in your console.
Below is an alternative approach, that you might want to try. Try to call initMap on the js instead of callback.
<div id="map" style="width:100%;height:500px"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI"></script>
<script>
$(function() {
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
initMap();
});
</script>

Related

Calling multiple google maps with API key call from wordpress template

I have the following code for my website, basically I want to display 2 google maps with different locations:
function lokacije(){
$output=" <div id='map'></div>
<script>
function initMap() {
var lokacija = {lat: 45.3592940, lng: 14.3495750};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
draggable: false,
scrollwheel: false,
center: lokacija
});
var marker = new google.maps.Marker({
position: lokacija,
map: map,
icon:'http://www.omniaprijevodi.hr/wp
content/uploads/2016/06/map_marker.png'
});
}
</script>
<script async defer src='https://maps.googleapis.com/maps/api/js?
key=AIzaSyAglKEMduJgZf1nN42mHkzeNA4jjpI0JA0&callback=initMap'>
</script>
";
return $output;
}
add_shortcode("lokacije","lokacije");
function lokacije2(){
$output=" <div id='map'></div>
<script>
function initMap() {
var lokacija = {lat: 45.813236, lng: 15.996887};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
draggable: false,
scrollwheel: false,
center: lokacija
});
var marker = new google.maps.Marker({
position: lokacija,
map: map,
icon:'http://www.omniaprijevodi.hr/wp-
content/uploads/2016/06/map_marker.png'
});
}
</script>
<script async defer src='https://maps.googleapis.com/maps/api/js?
key=AIzaSyAglKEMduJgZf1nN42mHkzeNA4jjpI0JA0&callback=initMap'>
</script>
";
return $output;
}
add_shortcode("lokacije2","lokacije2");
I call [lokacije] and [lokacije2] from Wordpress template, but I can't get to display them both, in fact none is displayed. Even if I call [lokacije] twice, I get the map to display only the first time - the second time it doesn't appear. Can someone please help me what I'm doing wrong because I'm having a hard time with this one?
Thank you very much in advance!
First, make sure google api script is loaded before you call the api, and you have to load the script only once. Secondly, your JS code redefines initMap(). Thirdly, you use the same element with ID = map for both maps.
Use wp_enqueue_script() to load the scripts: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
and have something like this for the js:
function initMap(element, lat, lng)
{
var map = new google.maps.Map(element, {
zoom: 16,
draggable: false,
scrollwheel: false,
center: {lat:lat, lng:lng};
});
}
and for the php (assuming you have jquery loaded):
function lokacije1()
{
return sprintf('<div map lat="12.34" lng="56.78"></div>');
}

initializing the google map api in angularjs function

I'm trying to initialize the google maps init function from a function, the working of function is to add a new div tag which will contain a map.
I tried code written in commented area below inside a function but it's not working but its working outside the function.
app.controller('controller1', function($scope, $http, $window) {
$scope.addMapPanel = function() {
var ref_div = angular.element(document.querySelector('#ref_div'));
var map_div = angular.element(document.querySelector('#map_div'));
if(map_div.length){
console.log('exist');
}else{
console.log('doesnot');
ref_div.append('<div class="col-md-6" id="map_div"></div>');
}
/*$scope.initialize = function() {
var map = new google.maps.Map(document.getElementById('map_div'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', $scope.initialize);*/
};
});
similar type answer : How do I add google map in angular.js controller?
You still need to have the DomListener call some function once that library has been loaded. From there, just check to see if the div exists. If not, you need to append it and then initialize a map onto that div.
However, I would recommend using directives for DOM interaction, as that is where View logic should exist in the MVC architecture. Plus, it allows reuse.
angular.module('app', []).
controller('mapController', function($scope) {
$scope.initialize = function () {
var ref_div = angular.element(document.querySelector('#ref_div'));
var map_div = angular.element(document.querySelector('#map_div'));
if(map_div.length){
var map = new google.maps.Map(document.getElementById('map_div'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}else{
ref_div.append('<div class="col-md-6" id="map_div"></div>');
var map = new google.maps.Map(document.getElementById('map_div'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
};
google.maps.event.addDomListener(window, 'load', $scope.initialize);
});
#map_div {
width: 150px;
height: 150px;
}
<div id="ref_div" ng-app="app" ng-controller="mapController">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js">
</script>

Google Maps Api shows grey map

I'm trying to integrate Google Maps Javascript API in my wordpress website.
I created an API key, and I added a pure html code block in my page.
Before it worked perfectly, but now it only show a grey piece. When I zoom out and drag the map around, the following picture is visible:
This is my code in the html block:
<div id="googlemaps"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googlemaps'), {
center: {lat: 51.341667, lng: 4.21444},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
async defer></script>
And YES, I replaced YOUR-API-KEY with my API key in my code (this is just so others won't use the generated code).
I don't know what is wrong with the map. I do not have errors in my webconsole.
Thanks in advance!
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googlemaps'), {
center: {lat: 51.341667, lng: 4.21444},
zoom: 8,
backgroundColor: '#fffff',
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
async defer></script
<div id="googlemaps"></div>
Use backgroundColor property
Call google.maps.event.trigger(map, 'resize') inside initMap() as you have resized the map div.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googlemaps'), {
center: {lat: 51.341667, lng: 4.21444},
zoom: 8
});
google.maps.event.trigger(map, 'resize')
}

Javascript - Google Maps Simple Map not rendering tiles on Webserver - works local tho

I tried embedding Google Maps javascript API to my website. Tried it local and it worked fine but as soon as i try it on my webserver the tiles wont load.
Heres the simple code im using:
#map { height: 250px; }
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 49.101670, lng: 9.212140},
zoom: 15
});
var marker = new google.maps.Marker({
position: {lat: 49.101670, lng: 9.212140},
map: map,
title: 'OPTIKHAUS FLEIN'
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrIgqoG8GX88lnjBFX_H_UH6VpK90khSA&callback=initMap">
</script>
Here is how it looks like on the website
Image
even the marker is showing up.
thanks in advance
You have extra spaces in url - js?key. Check my snippet. I update this line "https://maps.googleapis.com/maps/api/js?key=AIzaSyCrIgqoG8GX88lnjBFX_H_UH6VpK90khSA&callback=initMap" only
#map { height: 250px; }
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 49.101670, lng: 9.212140},
zoom: 15
});
var marker = new google.maps.Marker({
position: {lat: 49.101670, lng: 9.212140},
map: map,
title: 'OPTIKHAUS FLEIN'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrIgqoG8GX88lnjBFX_H_UH6VpK90khSA&callback=initMap">
</script>

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.

Categories