We Keep Coding

Google Maps doesn't show up in a Modal Ionic

I've been integrating Google maps to my ionic app by following https://www.joshmorony.com/integrating-google-maps-with-an-ionic-application/
this tutorial. I've integrated the map to a view without issues and it's detecting the location. But when I try to add the map into an modal I'm getting blank modal without a map in it.
I've checked Google Maps not showing in Ionic Modal , and as I'm loading the map after the HTML template is loaded I don't think it will be helpful.
This is my modal code which includes map.
<script id="location.html" type="text/ng-template">
<ion-modal-view>
<ion-content>
<div>
<div id="map" data-tap-disabled="true"></div>
</div>
<button class="button button-block button-dark " ng-click="closeModal()"> Close</button>
</ion-content>
</ion-modal-view>
</script>
This is my controller code which I use to open the modal.
$ionicModal.fromTemplateUrl('location.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.detectLocation = function() {
$scope.modal.show();
$scope.loadgooglemap();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
$scope.loadgooglemap = function(){
var options = {timeout: 10000, enableHighAccuracy: true};
$cordovaGeolocation.getCurrentPosition(options).then(function(position){
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Wait until the map is loaded
google.maps.event.addListenerOnce($scope.map, 'idle', function(){
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
var infoWindow = new google.maps.InfoWindow({
content: "Here I am!"
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open($scope.map, marker);
});
});
}, function(error){
console.log("Could not get location");
});
}
I'm not getting any error when I open the modal. Just getting the modal with the Close button(which I've included in the modal).
What might be the reason the map isn't loading in the modal. What have I done wrong? Can anyone help me with this ?

Add the following CSS rule:
ion-app._gmaps_cdv_ .ion-page:not(._gmaps_cdv_),
ion-app._gmaps_cdv_ ion-modal:not(._gmaps_cdv_) {
display: none;
}
In modal Component:
ionViewWillLeave() {
const nodeList = document.querySelectorAll('._gmaps_cdv_');
for (let k = 0; k < nodeList.length; ++k) {
nodeList.item(k).classList.remove('_gmaps_cdv_');
}
}

Google Maps Closing infowindow auto centers

I've added a map to my site using Google Maps API V3.
I've got everything working except this:
how do i get the map to auto center when i close the info window?
sample code :
var myLatlng = new google.maps.LatLng(1.0, -1.0);
google.maps.event.addListener(infowindow, 'closeclick', function () {
map.setCenter(myLatlng);
});
really stuck and would appreciate any suggestions!

try this
google.maps.event.addListener(infowindow, 'closeclick', function () {
map.setCenter(this.getPosition());
});

You must have some mistake somewhere in your code, because it works for me:
http://jsfiddle.net/SZ3XC/
var infowindow = new google.maps.InfoWindow({
content: 'ahoj'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
var myLatlng = new google.maps.LatLng(1.0, -1.0);
google.maps.event.addListener(infowindow, 'closeclick', function () {
map.setCenter(myLatlng);
});

Thank you for the jsfiddle. I got it to work on my map as well as added an option to zoom back out to the full map when clicking off the infowindow. Here's an example:
var mapCenter = new google.maps.LatLng(0,22);
`google.maps.event.addListener(infowindow, 'closeclick', function () {
map.setCenter(mapCenter);
var opt = { zoom: 2};
map.setOptions(opt);
});`

map.js background not always loading, suggestions to make it more consistent?

I have a google map background on one of the pages to my website through javascript, but I noticed it doesn't always load. Instead part of it will appear as a small square in the upper lefthand corner (as if it stop while tiling the page). If I refresh my screen or even resize my window, it will load and then I can't recreate the problem for a while.
It happens most consistently when first visiting the website, obviously a problem for new visitors we want to attract the website.
Any ideas on making it load better? Or ideas on what the problem is?
Code:
/*
Global
*/
var map;
function initialize() {
/*
Basic Setup
*/
var latLng = new google.maps.LatLng(39.726020913196265, -105.00015970000004);
var myOptions = {
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
draggable: true,
disableDoubleClickZoom: true, //disable zooming
scrollwheel: false,
zoom: 16,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP // ROADMAP; SATELLITE; HYBRID; TERRAIN;
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/*
MARKER
*/
/*
//for custom image
var image = 'yourflag.png';
icon: image
//for animation marker drop
animation: google.maps.Animation.DROP
*/
var markerlatlng = new google.maps.LatLng(39.726020913196265, -105.00015970000004);
var marker = new google.maps.Marker({
position: markerlatlng,
title:"Hello World!"
});
marker.setMap(map);
/*
INFO Bubble
*/
myInfoWindowOptions = {
content: '',
maxWidth: 275
};
infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map,marker);
});
google.maps.event.addListener(marker, 'dragstart', function(){
infoWindow.close();
});
infoWindow.open(map,marker);
}//end initialize
/*
onLoad
*/
$(function(){
initialize();
$("#zo").click(function(event){
event.preventDefault();
map.setZoom( map.getZoom()-1 );
//map.setCenter(new google.maps.LatLng(9.825183,15.1975769));
});
$("#zi").click(function(event){
event.preventDefault();
map.setZoom( map.getZoom()+1 );
});
$("#gt").click(function(event){
event.preventDefault();
var lt1 = new google.maps.LatLng(36.114739, -115.171840);
//map.setZoom( 16 );
map.panTo(lt1);
});
});

First of all, I love the scrolling effect of the page, but looking at the code and the page source, I can't completely tell how your onload event fires. I too sometimes had problems with certain pages not loading completely on certain browsers.
Have you tried attaching multiple events to load the background?
function doLoad() { // this is what executes when page is to load
initialize();
}
//different event handlers for page load
if ( window.addEventListener ) {
window.addEventListener( "load", doLoad, false );
}
else if ( window.attachEvent ) {
window.attachEvent( "onload", doLoad );
}
else if ( window.onLoad ) {
window.onload = doLoad;
}
else window.setTimeout('doLoad', 1000);

Google Map dragging Marker issue

I want to alert the user about new position on map when he/she dragged the marker. Apparently when I drag my marker, the listener even will not trigger. I want my user be able to choose to put marker on map and also be able to drag it. clicking and dragging other side of the map can change the marker position, but when I try to add the listener for dragging the map, to pop up a menu alert, it doesn't work. Thanks
var LatLng = new google.maps.LatLng(lat,lng);
var marker;
var mapOptions = {
center: LatLng,
zoom: 16,
minZoom:12,
maxZoom:18,
panControl:false,
scrollwheel: false,
rotateControl:false,
streetViewControl:false,
keyboardShortcuts:false,
mapTypeControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var Gmap = new google.maps.Map($('#map_canvas').get(0),mapOptions);
// adding pointer by clicking on mac
google.maps.event.addListener(Gmap, 'click', function(e) {
if (marker) {
marker.setPosition(e.latLng);
}else{
marker = new google.maps.Marker({
position: e.latLng,
map: Gmap,
draggable:true
});
}
Gmap.panTo(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
alert('Show something here');
});

The listener isn't working because when you define your listener, the marker is undefined. You need to place it in the function block that defines your marker:
google.maps.event.addListener(Gmap, 'click', function(e) {
if (marker) {
marker.setPosition(e.latLng);
} else {
marker = new google.maps.Marker({
position: e.latLng,
map: Gmap,
draggable:true
});
google.maps.event.addListener(marker, 'dragend', function() {
alert('Show something here');
});
}
Gmap.panTo(marker.getPosition());
});
See that in action right here.

could I get you to try this
google.maps.event.addListener(marker, 'dragend', function () {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
alert('Show something here');
});
You can also use firefox to put a "Break" in your javascript so that you can see if the javascript function has been triggered. info on that can be found here

google maps api v3 - open infowindow from an external click

So i have a V3 map which is initialised like this:
function init() {
var mapCenter = new google.maps.LatLng(51.5081289,-0.128005);
var map = new google.maps.Map(document.getElementById('map'), {
'zoom': 6,
'center': mapCenter,
'mapTypeId': google.maps.MapTypeId.ROADMAP,
panControl: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
});
and a load of markers that look like this:
var marker25837500 = new google.maps.Marker({
map: map,
pop_title: 'blah blah',
pop_wind: 'more blah',
zIndex: 999,
icon: 'images/map_icons/s6.png'
});
google.maps.event.addListener(marker25837500, 'click', onMarkerClick);
and lastly i have a function to open the infowindow on he click of each maker:
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick = OpenInfoWindow;
function OpenInfoWindow() {
var marker = this;
infoWindow.setContent('<h3>' + marker.pop_title + '</h3>' +
marker.pop_body);
infoWindow.open(map, marker);
};
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
My question is, what do i need to do to make a particular marker (say marker25837500) show its infowindow when a inside the page is clicked - perhaps something like:
<div id="marker25837500">click to see infoWindow!</div>
I'm sure it's easy but i just can see my way though it!
Thanks

You might use trigger event.
$('#marker25837500').click(function () {
google.maps.event.trigger(marker25837500, 'click')
})
Check this- https://developers.google.com/maps/documentation/javascript/reference#event
Edit: Also noticed that you are calling onMarkerClick() when marker25837500 is clicked, but you named the other function OpenInfoWindow() so you might need to change that too.

You don't have to do anything unusual or simulate a click on the marker; just make sure the OpenInfoWindow function can be reached:
//This is the simple case:
var myDiv = document.getElementById( "marker25837500" );
google.maps.event.addDomListener( myDiv, "click", OpenInfoWindow );
//Or if you have other things that you want to accomplish when this occurs:
var myDiv = document.getElementById( "marker25837500" );
google.maps.event.addDomListener( myDiv, "click", function() {
OpenInfoWindow();
//Do other stuff here
});
As long as the InfoWindow is in scope (can be reached when the OpenInfoWindow function is called), this should work fine.