When I open modal popup to show map, the first time map is loaded but when I click second time it will not loaded but if click on map div then it appears.
I tried lot of times to solve this but I failed. Here's my code that how I opened modal with map
<script src="<?php echo base_url();?>js/farm_gmaps.js"></script>
<script type="text/javascript">
$(document).ready(function(e)
{
<?php if($farm['latitude'] && $farm['longitude']){?>
var lat = '<?php echo $farm['latitude'];?>';
var long = '<?php echo $farm['longitude'];?>';
<?php }else{?>
var lat = '21.06656';
var long = '72.94922';
<?php }?>
//initialize(lat,long,"");
$('#add_farm_popup').on('show.bs.modal', function (e)
{
//alert("asdasd")
initialize(lat,long,"");
});
});
Please note that this code in opened popup document ready.
here's my design code .
<div class="right" id="farm_map">
</div>
<div class="contact_map">
<input id="searchTextField" class="form-control" type="text" size="30" placeholder="Enter a location" value="<?php echo $farm['address'];?>">
</div>
Here's my JavaScript code
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos)
{
geocoder.geocode
({
latLng: pos
}, function(responses)
{
if (responses && responses.length > 0)
{
//console.log(responses[0]);
updateMarkerAddress(responses[0].formatted_address,pos.lat(),pos.lng());
}
else
{
//updateMarkerAddress('Cannot determine address at this location.');
alert('Cannot determine address at this location.');
}
});
}
function updateMarkerAddress(address,lat,lng)
{
console.log(lat);
console.log(lng);
$("#latitude").val(lat);
$("#longitude").val(lng);
$("#address").val(address);
/*$("#temp_latitude").val(lat);
$("#temp_longitude").val(lng);
$("#text_location_address").val(address);
$("#address").val(address);
var split_address = address.split(",");
var length = split_address.length;
var city = split_address[length-3].trim();
var country = split_address[length-1].trim();
$("#country").val(country);
$("#city").val(city);*/
}
function initialize(lat,long)
{
/*var goo = google.maps,
map = new goo.Map(document.getElementById('farm_map'), {
zoom: 5,
center: new goo.LatLng(lat,long),
mapTypeId: google.maps.MapTypeId.HYBRID
}),
shapes = [],
selected_shape = null,
byId = function(s) {
return document.getElementById(s)
};*/
var bounds = new google.maps.LatLngBounds();
var latLng = new google.maps.LatLng(lat,long);
var mapOptions =
{
center: latLng,
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById('farm_map'),
mapOptions);
var input = (document.getElementById('searchTextField'));//Only Support The Input Field in google map js
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker
({
position: latLng,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function()
{
geocodePosition(marker.getPosition());
});
google.maps.event.addListener(autocomplete, 'place_changed', function()
{
infowindow.close();
marker.setVisible(false);
input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry)
{
// Inform the user that the place was not found and return.
input.className = 'notfound';
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport)
{
map.fitBounds(place.geometry.viewport);
}
else
{
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setIcon(/** @type {google.maps.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(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
geocodePosition(marker.getPosition());
var address = '';
if (place.address_components)
{
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong><u>' + place.name + '</u></strong><br>' + address);
infowindow.open(map, marker);
});
bounds.extend(latLng);
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
geocodePosition(event.latLng);
// alert(event.latLng);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
/*function setupClickListener(id, types)
{
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function()
{
autocomplete.setTypes(types);
});
}*/
//setupClickListener('changetype-all', []);
//setupClickListener('changetype-establishment', ['establishment']);
//setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);
function placeMarker(location) {
var mapProp = {
center:location,
zoom:2,
mapTypeId:google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("farm_map"),mapProp);
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function()
{
geocodePosition(marker.getPosition());
});
google.maps.event.addListener(map, 'click', function(event) {
placeMarker1(event.latLng);
geocodePosition(event.latLng);
});
}
First case
