I am using google map in application. The scenario is, when user will click in the text box, a modal window will be appeared in which google map have to display with Search box. Please note it is working fine without modal. But when I use bootstrap modal, now google map is displaying fine with search box but
1) Search box auto plete feature is not working. (but worked without modal)
2) When user cancel the model window and re-open it, then SearchBox disappears with a javascript error "Cannot read property 'value' of null at new T6 (places_impl.js:10)"
Below is my plete code. Please can any one diagnose the issue?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoogleMap.aspx.cs" Inherits="WingtipToys.GoogleMap" %>
<!DOCTYPE html>
<html xmlns="">
<head runat="server">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places Searchbox</title>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href=".3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src=".1.1/jquery.min.js"></script>
<!-- Latest piled JavaScript -->
<script src=".3.7/js/bootstrap.min.js"></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
#target {
width: 345px;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<label>Position</label>
<div class="input-group firearms-popup footableModel" data-toggle="modal" data-target="#position-model">
<asp:TextBox ID="Position" runat="server" CssClass="form-control" ></asp:TextBox>
<div class="input-group-addon">
<i class="fa fa-location-arrow"></i>
</div>
</div>
<!-- Position model -->
<div class="modal fade" id="position-model" TabIndex="-1" role="dialog">
<!-- Model 1 -->
<div class="modal-dialog firearms-model-width eservices-model-box-data css-fade" role="document">
<div class="modal-content eservices-model-box-content">
<div class="modal-header eservices-model-box-header">
<div class="col-md-12">
<button type="button" class="close eservices-model-box-closed" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title eservices-model-box-data-title">SelectPosition</h4>
</div>
</div>
<div class="modal-body eservices-model-box-body">
<div class="row m-zero hide-label map-model">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<!-- <div id="gooleMapCordinates" style="width: 100%; height: 300px;"></div> -->
<div id="map" style="width: 100%; height: 300px;"></div>
<script>
function LoadMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: { lat: 25.248158, lng: 55.371863 },
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, "click", function (event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
// populate yor box/field with lat, lng
$("#selectedLocation").text(lat + ";" + lng);
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function (marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
function setCordinates() {
var positionTextbox = $("#<%= Position.ClientID %>");
positionTextbox.val($("#selectedLocation").text());
reValidate(positionTextbox);
}
</script>
<script src='="en"&key=MyGoogleKey&libraries=places' async defer>
</script>
</div>
</div>
<div class="modal-footer eservices-model-box-footer">
<div class="col-sm-7">
<strong id="selectedLocation"></strong>
</div>
<div class="col-sm-5">
<button type="button" class="btn eservices-model-box-data-btn btn-grey" data-dismiss="modal">Cancel</button>
<button type="button" class="btn eservices-model-box-data-btn btn-green" data-dismiss="modal" onclick="javascript: setCordinates();">AddPosition</button>
</div>
</div>
</div>
</div>
<!--/ Model 1 -->
</div>
<!--/ Position model -->
</form>
<script>
$(document).ready(function () {
$("#position-model").on("shown.bs.modal", function () {
LoadMap();
});
});
</script>
</body>
</html>
Below is plete javascript error which es when we re-opened the modal window.
Uncaught TypeError: Cannot read property 'value' of null
at new T6 (places_impl.js:10)
at Object.g7.j (places_impl.js:31)
at ix.<anonymous> (js?language="en"&key=AIzaSyA1lkktOc_Efhalgu55QcoZGXNTxbXxhUg&libraries=places:141)
at Object._.G (js?language="en"&key=AIzaSyA1lkktOc_Efhalgu55QcoZGXNTxbXxhUg&libraries=places:46)
at new ix (js?language="en"&key=AIzaSyA1lkktOc_Efhalgu55QcoZGXNTxbXxhUg&libraries=places:141)
at LoadMap (GoogleMap.aspx:161)
at HTMLDivElement.<anonymous> (GoogleMap.aspx:255)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.q.handle (jquery.min.js:3)
at Object.trigger (jquery.min.js:4)
I am using google map in application. The scenario is, when user will click in the text box, a modal window will be appeared in which google map have to display with Search box. Please note it is working fine without modal. But when I use bootstrap modal, now google map is displaying fine with search box but
1) Search box auto plete feature is not working. (but worked without modal)
2) When user cancel the model window and re-open it, then SearchBox disappears with a javascript error "Cannot read property 'value' of null at new T6 (places_impl.js:10)"
Below is my plete code. Please can any one diagnose the issue?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoogleMap.aspx.cs" Inherits="WingtipToys.GoogleMap" %>
<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head runat="server">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places Searchbox</title>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest piled JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
#target {
width: 345px;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<label>Position</label>
<div class="input-group firearms-popup footableModel" data-toggle="modal" data-target="#position-model">
<asp:TextBox ID="Position" runat="server" CssClass="form-control" ></asp:TextBox>
<div class="input-group-addon">
<i class="fa fa-location-arrow"></i>
</div>
</div>
<!-- Position model -->
<div class="modal fade" id="position-model" TabIndex="-1" role="dialog">
<!-- Model 1 -->
<div class="modal-dialog firearms-model-width eservices-model-box-data css-fade" role="document">
<div class="modal-content eservices-model-box-content">
<div class="modal-header eservices-model-box-header">
<div class="col-md-12">
<button type="button" class="close eservices-model-box-closed" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title eservices-model-box-data-title">SelectPosition</h4>
</div>
</div>
<div class="modal-body eservices-model-box-body">
<div class="row m-zero hide-label map-model">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<!-- <div id="gooleMapCordinates" style="width: 100%; height: 300px;"></div> -->
<div id="map" style="width: 100%; height: 300px;"></div>
<script>
function LoadMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: { lat: 25.248158, lng: 55.371863 },
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, "click", function (event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
// populate yor box/field with lat, lng
$("#selectedLocation").text(lat + ";" + lng);
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function (marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
function setCordinates() {
var positionTextbox = $("#<%= Position.ClientID %>");
positionTextbox.val($("#selectedLocation").text());
reValidate(positionTextbox);
}
</script>
<script src='https://maps.googleapis./maps/api/js?language="en"&key=MyGoogleKey&libraries=places' async defer>
</script>
</div>
</div>
<div class="modal-footer eservices-model-box-footer">
<div class="col-sm-7">
<strong id="selectedLocation"></strong>
</div>
<div class="col-sm-5">
<button type="button" class="btn eservices-model-box-data-btn btn-grey" data-dismiss="modal">Cancel</button>
<button type="button" class="btn eservices-model-box-data-btn btn-green" data-dismiss="modal" onclick="javascript: setCordinates();">AddPosition</button>
</div>
</div>
</div>
</div>
<!--/ Model 1 -->
</div>
<!--/ Position model -->
</form>
<script>
$(document).ready(function () {
$("#position-model").on("shown.bs.modal", function () {
LoadMap();
});
});
</script>
</body>
</html>
Below is plete javascript error which es when we re-opened the modal window.
Uncaught TypeError: Cannot read property 'value' of null
at new T6 (places_impl.js:10)
at Object.g7.j (places_impl.js:31)
at ix.<anonymous> (js?language="en"&key=AIzaSyA1lkktOc_Efhalgu55QcoZGXNTxbXxhUg&libraries=places:141)
at Object._.G (js?language="en"&key=AIzaSyA1lkktOc_Efhalgu55QcoZGXNTxbXxhUg&libraries=places:46)
at new ix (js?language="en"&key=AIzaSyA1lkktOc_Efhalgu55QcoZGXNTxbXxhUg&libraries=places:141)
at LoadMap (GoogleMap.aspx:161)
at HTMLDivElement.<anonymous> (GoogleMap.aspx:255)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.q.handle (jquery.min.js:3)
at Object.trigger (jquery.min.js:4)
1 Answer
Reset to default 8What i did was to trigger the init function when the modal is opened (this will help to not load the map when is not needed). The Search box auto plete is probably working, set the z-index of the pac-container class to a really high value. The style property should be like this:
.pac-container { z-index: 100000 !important; }
It will bring your drop-down list to the front.