Google map does not load when displayed onclick - javascript

My google map is hidden and it is displayed using ng-show when I click on a previous button. The problem is that it does not load / initialize. It just stays grayed out. I've tried "resize" but does nothing. I've tried using onclick="displayMap()" and using display none/block but it's not working either. No console errors.

This is a known issue (see for example here), the map size is not properly determined once the parent div display style is set to none. Both ng-hide/ng-show directives hides/shows the given element by manipulating display style.
One solution would be to replace ng-show with ng-class/ng-style directives to control the map visibility as demonstrated below:
angular.module('myApp', [])
.controller('MapCtrl', [
'$scope', function ($scope) {
$scope.mapIsVisible = false;
$scope.toggleMap = function(){
$scope.mapIsVisible = !$scope.mapIsVisible;
};
$scope.initMap = function () {
var center = new google.maps.LatLng(-33.870501, 151.206704);
var mapOptions = {
zoom: 12,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
$scope.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', $scope.initMap);
}]);
#map-canvas {
width: 500px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="script.js"></script>
<div ng-app="myApp">
<div ng-controller="MapCtrl">
<button ng-click="toggleMap()">Toggle map</button>
<div ng-style="{'visibility': mapIsVisible ? 'visible':'hidden'}">
<div id="map-canvas"></div>
</div>
</div>
</div>

You can use callback for this..
function displayMap(){
jQuery("#mapDiv").fadeIn("fast",function(){
initMap();
});
}

Related

Google Maps Autocomplete not loading in Rails app

Trying to get Google Maps autocomplete for addresses working. This is the snippet of code I'm using:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=<%=ENV['GOOGLE_API_KEY'] %>&libraries=places"></script>
<label for="locationTextField">Location</label>
<input id="locationTextField" type="text" size="50">
<script>
function init() {
var input = document.getElementById('locationTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
I've put this inside one of my views and while everything appears to load fine (no console errors), when I type in an address, the dropdown list never appears.
That dropdown box is in a .pac-container div, which does appear, though display:none; when I override that in Chrome dev tools, I just see the google logo appear below my search box (as if the list is empty).
I copied this code to a blank html page outside of my rails app and it worked fine.
It works just fine for me.
I tested this:
<style> #map {height: 90%} </style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<label for="locationTextField">Location</label>
<input id="locationTextField" type="text" size="50">
<div id="map"></div>
<script>
function init() {
var input = document.getElementById('locationTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.869754630095834, lng: 4.353812903165801},
zoom: 12
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
Is there anything you are doing different? Anything I'm missing?

Google Maps API on Squarespace

I'm using Squarespace to build my website and want to insert a custom map from google maps javascript api. I've already gotten google api key.
I've followed steps as below :
What I'm trying to archive is just to show a google map on my web.
Step 1: Insert a embed block for html
<div id="map_canvas"></div>
Step 2: insert javascript in page header
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section
#map_canvas
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px
}
But the codes I put on Squarespace didn't work. How should I do?
Here the link to my webpage on SquareSpace
Your Site Title
Thanks!!
LoL, u put the script at a very wrong place i think.
1st. put your script, all of it after </body>
2nd. you need a cover for your maps <div> like a wrapper or so to put it in center. and using a cover/wrapper div you can manipulate the size and the shape.
3rd. i don't know id="maps_canvas". because from google i got this <div id='gmap_canvas' style='height:100%;width:100%; position:static'>, it was gmap_canvas. and put style in it to make them fit with your cover/wrapper div.
easier way: http://embedgooglemaps.com/en/
perhaps it'll help. :)
This is what I changed in my code as below :
Step 1: Insert a code block for html <-- it was not embed block, but code block. I mistyped before.
<div id="mapWrapper">
<div id='gmap_canvas' style='height:100%;width:100%; position:static'>
</div>
</div>
Step 2: insert javascript in page header.
I change only ID name from 'map_canvas' to 'gmap_canvas'
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section.
Changed ID name from 'map_canvas' to 'mapWrapper', then set another size.
#mapWrapper
{
width: 750px;
height: 500px;
margin: 0px;
padding: 0px
}
I tried to put most of everything people advised me, but still the map doesn't come up on my site.
Is there something wrong yet?
I did the same thing with my site.
What I did differently is not put my #map-canvas within a wrapper. While previewing your site, are you able to find your gmap_canvas with the inspect view? It may be that the content is there, just not displaying properly.
My code:
The following is in the page header code injection box. Note that a large bit of this code (and I don't remember which parts since I don't know JS) is just to keep the pin centered on different screen sizes.
<style type="text/css">
html, body, #map-canvas {
height: 400px;
width 960px;
margin: 0;
padding: 0;}
#banner-area-wrapper {
display: none;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap">
</script>
<script type="text/javascript">
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map-canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}
function initialize() {
var myLatLng = {lat: 39.910073, lng: -82.965509};
var mapOptions = {
center: myLatLng,
zoom: 14,
panControl: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.LEFT_CENTER},
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Opportunity Center'
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
On the page, I have a code block, with the following in it:
<div id="map-canvas" style="width:90%;margin:auto;"></div>
Note that I did not put my #map-canvas inside a wrapper, nor include anything in the custom CSS.
I made a quick dummy site, and replicated your failure to show the map, but I don't know quite enough about Squarespace to say exactly why. I'd start with copying my code and see if that works for you - seems like the big difference is your wrapper around the canvas.

Google Map API inside a Reveal Modal not showing fully

I am having problems with a Google Map that I have inside a div, which upon button click, pops up on screen. The Google Map is only partially showing. I know that I need to that I need to create a resize event, but do not know how, or where to put it. Any help would be much appreciated! Please keep in mind that I have little knowledge of JS!
Link to test site: CLICK ON GOOGLE MAP BUTTON TO SEE THE PROBLEM AT HAND:
http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#
My Google API script:
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.739318, -89.266507),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
</script>
The div which contains the map:
<div id="myModal" class="reveal-modal large">
<h2>How to get here</h2>
<div id="map_canvas" style="width:600px; height:300px;"></div>
<a class="close-reveal-modal">×</a>
</div>
The script which calls the map upon button click:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal1').click(function() {
$('#myModal').reveal();
});
});
</script>
Following Two solutions worked for me
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.739318, -89.266507),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
return map;
}
<div id="myModal" class="reveal-modal" data-reveal>
<div id="map_canvas" style="height: 300px"></div>
<a class="close-reveal-modal">×</a>
</div>
$(document).ready(function() {
var myMap;
$('#myModal').bind('open', function() {
if(!myMap) {
var myMap = initialize();
setTimeout(function() {
google.maps.event.trigger(myMap, 'resize');
}, 300);
}
});
}
OR
$(document).ready(function() {
var myMap;
$('#myModal').bind('opened', function() {
if(!myMap) {
var myMap = initialize();
google.maps.event.addDomListener(window, 'load', initialize);
}
});
});
First, based on the source linked to, the script which calls the map upon button click is doing nothing but throwing an error because you have it in the page before jQuery is loaded. You can see it in the error console. You need to move that to the bottom of the page after the rest of the scripts.
Your reveal is "working" because you are using the data-reveal-id attribute on the menu item and the reveal script wires it up automatically.
You are creating the map onload which is bad practice. Don't create it until/unless it is needed.
So to fix your issue, this is what I did. Remove the data-reveal-id from the menu item and replace it with an ID, or you can just use some other selector to access it. I changed it to id="myModal1" since that is what you had in your event code already.
Move your script which calls the map upon button click to the bottom, and change it to look like this:
$(document).ready(function() {
var map;
$('#myModal1').click(function() {
if(!map){
var mapOptions = {
center: new google.maps.LatLng(39.739318, -89.266507),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
$('#myModal').reveal();
});
});
This will create the map only when the user clicks the link to show it and only creates it once. That should fix it for you. If you have to, you can pass an opened callback to the reveal() call and trigger resize there but in my limited testing it was not necessary.
You can also get rid of the entire initialize function.
Now go get a band-aid and put some ice on that head.
Removing width: 600px; on the <div id="map_canvas"> and triggering resize on your map after opening the modal should do the trick:
$(".reveal-modal").on("reveal:opened", function(e) {
google.maps.event.trigger(map, 'resize')
});
Try this
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.739318, -89.266507),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
$( document ).bind( "pageshow", function( event, data ){
google.maps.event.trigger(map, 'resize');
});
</script>
$("#myModal").on('shown.bs.modal', function(){
google.maps.event.trigger(map, 'resize')
});

show map Google Maps JavaScript API v3

Hi everyone I try to use geolocalization for my webside made with joomla
I obtained the latitude and longitude and fine... But dont show me any map
In my code I am drawing the map inside a div
this is my code
<script type="text/javascript">
function init() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var mapOptions= {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marcador = new google.maps.Marker();
marcador.setPosition(pos);
marcador.setMap(map);
}, function() {
alert("su navegador no acepta geolocalización");
});
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
in my head I have this
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?ver=3.1.2'></script>
and his in my body
<div id="map"></div>
I have been read other post with the same problem, but I don't find the error in my code.
Thanks
There are some small errors in your code - hint: try using the Javascript console in Chrome to see these errors:
You do not have 'pos' defined here: marcador.setPosition(pos);
...and you want to create a marker with it, so you have to use the LatLng object
give your div a width and height (if you have not done it in your CSS file)
Here is a JSFiddle with all there errors fixed
Where is pos defined? This will most likely cause a JS error which will prevent the map displaying.
marcador.setPosition(pos);
Give your div a size(width and height):
<div id="map" style="width:400px;height:300px"></div>
You need to set width and height values for your #map and make sure the init() is called
here my jsfiddle : http://jsfiddle.net/3MTtc/1/

Inline content for colorbox not being displayed

i'm trying to display the google map into colorbox popup window by clicking a link that pulls the map from a hidden div. i'm using the inner html concept of colorbox http://www.jacklmoore.com/colorbox/example1/ for loading the map from a hidden div <div id="map_canvas"></div> into it's window.
The whole blocks of code is are following
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=xyxyxyxyxyxyxyxyxyxyxyxyxyx&sensor=false"></script>
<script type="text/javascript" language="javascript">
function initialize()
{
var cenLatlng = new google.maps.LatLng(/////////,///////////);
var myOptions = {
zoom: 15,
center: cenLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var myLatlng = new google.maps.LatLng(/////////,////////////);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"XXXXXXXXXXX"
});
var contentString = '<div class="info"><img style="float:left;padding-right:10px;" src="/dummy.jpg"><b>YYYYYYYY</b> <br/>' +
'ZZZZZZZZZZ <br />' +
'AAAAAAAAA <br />' +
'Telephone: BBBBBBBBB</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
width:150,
height:90
});
infowindow.open(map,marker);
// Start of newly added code block
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
// End of newly added code block
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
$(document).ready(function(){
$(".inline").colorbox({
inline:true,
scroll:false
});
});
</script>
<div id="map_canvas" style=width:700px; height:500px; display:none;></div>
<p><a class='inline' href="#map_canvas">Display map in colorbox</a></p>
the problem is that the the map isn't displayed at all when it is loaded from the hidden div. On the other hand the map is loaded perfectly both into the hidden div and colorbox window when the div map_canvas isn't hidden.
i shall have to use all the blocks of code for my application but the map should be loaded properly from the hidden div.
Any idea?
By the way, i'm using google api v-3
When using inline content, you don't want the target content (the element to which the href refers) to be hidden. Instead, enclose the content (unhidden) in a another div that is hidden like this:
<div style="display:none">
<div id="map_canvas" style="width:700px; height:500px"></div>
</div>
Maybe you'll need to initialize your map on the onComplete of the colorbox.
$(".inline").colorbox({
inline:true,
scroll:false
onComplete: function(){
initialize();
}
});
and remove this line in your script:
google.maps.event.addDomListener(window, 'load', initialize);
But your map will be reloaded everytime you open colorbox

Categories

Resources