Google map content not displaying inside Bootstrap modal part 2

Google map content not displaying inside Bootstrap modal part 2 - javascript

Hello Stackoverflow Coders, I have created another google map with a form input that collects users address and populates it on a map. I have followed a correction created in this link below
Google map content not showing inside Bootstrap modal view
but still yet I cannot get the map to display inside a modal view. If run it on a normal page it will be okay.
can someone help me with that?
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places&region=ng&language=en&sensor=true&key=AIzaSyAlb3bRgk_Jq3mBzgpVyLTeeKL-RKaSkx4"></script>
</head>
<body>
<div class="container">
<h2>Google Map</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open MAP</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<br> Address:
<input id="searchTextField" type="text" size="50" style="">
<br>
<div id="test" style="height: 300px;width: 100%;margin: 0.6em;"></div>
<!-- MAP -->
<script type="text/javascript">
$(function getMap() {
var lat = 13.034118,
lng = 77.5679959;
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
//zoomControl: true,
//zoomControlOptions: google.maps.ZoomControlStyle.LARGE,
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_left
}
},
map = new google.maps.Map(document.getElementById('test'), mapOptions),
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(autocomplete, 'place_changed', function(event) {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
moveMarker(place.name, place.geometry.location);
$('.MapLat').val(place.geometry.location.lat());
$('.MapLon').val(place.geometry.location.lng());
});
google.maps.event.addListener(map, 'click', function(event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
infowindow.close();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"latLng": event.latLng
}, function(results, status) {
console.log(results, status);
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("#searchTextField").val(results[0].formatted_address);
}
});
});
function moveMarker(placeName, latlng) {
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
//infowindow.open(map, marker);
}
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Tiles may not load if your map canvas is invisible when map is initializd.But you can trigger tiles loading by using resize.Since you are using you need to first store a reference to map object.
map = new google.maps.Map(document.getElementById('test'), mapOptions),
tmp = map;
And call resize event on map when your modal gets shown
$('#myModal').on('shown.bs.modal', function () {
google.maps.event.trigger(tmp, 'resize')
})

Related

Google Map API - Directions Service does not auto zoom when the map in a modal

I have the following function to show direction between 2 lats and lngs to user
$(document).ready(function(){
initialize_direction();
});
function initialize_direction() {
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var direction_map;
directionDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
direction_map = new google.maps.Map(document.getElementById("direction_canvas"), myOptions);
directionDisplay.setMap(direction_map);
var start = '51.5074, 0.1278';
var end = '<%= lat %>' + ',' + '<%= lng %>';
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionDisplay.setDirections(response);
}
});
}
The problem is if I put the canvas that contains the map on the page, the map is automatically zoomed to fit 2 markers but if I put the canvas in a Bootstrap modal, I got the following which does not automatically zoomed to fit markers:
Does anyone know how to fix this? Below is the Bootstrap Modal
<div class="modal fade" id="direction_modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Direction to restaurant</h4>
</div>
<div class="modal-body">
<div id="direction_canvas" style="width:100%;height:400px;"></div>
</div>
</div>
</div>

Call initialize_direction(); on modal open. Try Like below it may help.
$(document).ready(function(){
$( "#direction_modal" ).on('shown.bs.modal', function(){
initialize_direction();
});
});
function initialize_direction() {
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var direction_map;
directionDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
direction_map = new google.maps.Map(document.getElementById("direction_canvas"), myOptions);
directionDisplay.setMap(direction_map);
var start = '51.5074, 0.1278';
var end = '51.2074, 0.1278';
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionDisplay.setDirections(response);
}
});
}
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyAmqnSK2LDuPesG7GMG9thy_KDDmKnr7Zk"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#direction_modal">Open Modal</button>
<!-- Modal content-->
<div class="modal fade" id="direction_modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Direction to restaurant</h4>
</div>
<div class="modal-body">
<div id="direction_canvas" style="width:100%;height:400px;"></div>
</div>
</div>
</div>
</div>

I was getting same issue on fancybox. Try below code to achieve the same.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: //your lat,
lng: //your lng
}
});
//start
map.setOptions({minZoom: 7});

Google Maps api show grey screen

I am trying to get on my website the gmaps with few markers but i am getting the grey screen or partially grey screen.Before, I used google maps API the same way and everythings works fine. If you can help me I would be grateful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zadanie 7</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY"></script>
</head>
<body>
<div class="container-fluid" id="map" style="height: 500px;">
</div>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Zadanie 6 Martin Kranec</h4>
<ul class="nav nav-pills nav-stacked">
<li>Prvá Stránka</li>
<li>Druhá Stránka</li>
<li class="active">Tretia Stránka</li>
</ul><br>
</div>
<div class="container-fluid">
<div class='container-fluid'><div class='table-responsive'><table class='table'><thead><tr><th>Vlajka</th><th>Štát</th><th>Počet Navštevníkov</th></tr></thead><tbody><tr><td>World</td><td>World</td><td>2</td></tr><tr><td><img class='flag' src='http://www.geonames.org/flags/x/sk.gif'></td><td><a href='countrystatistics.php?countrycode=sk'>Slovensko</a></td><td>2</td></tr></tbody></table></div></div> </div>
</div>
</div>
<footer class="container-fluid">
<p>&COPY;Martin Kranec Webové technológie</p>
</footer>
<script type='text/javascript'>
var lat=[];
var lon=[];
lat.push(48.15);
lon.push(17.1167);
lat.push(48.1704);
lon.push(17.4209);
</script>
<script>
function initMap() {
//alert(lat[1]);
var mapProp = {
center: new google.maps.LatLng(89, -25),
zoom: 4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var count = lat.length;
for (var i = 0; i < count; i++) {
var myLatLng = {lat: lat[i], lng: lon[i]};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ''
});
}
}
initMap();
//initMap();
</script>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=initMap"></script>-->
</body>
</html>
and here is my website where I work on this project http://147.175.98.165/zadanie7/thirdpage.php

Google maps has a lot of race conditions. I use this code a lot to display them instead. This code should be in a ready event like jquery ready.
new Promise(function (resolve, reject) {
if (!document.getElementById('google-maps')) {
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
var link = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=mapsFinishedLoading";
fileref.setAttribute("async", "async");
fileref.setAttribute("defer", "defer");
fileref.setAttribute("src", link);
fileref.setAttribute("id", 'google-maps');
window.mapsFinishedLoading = resolve;
document.getElementsByTagName("body")[0].appendChild(fileref);
} else {
resolve();
}
}).then(function (result) {
//Your map should be available now
mapOptions={};//put your options here
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
});
Make sure your map div is visible before calling
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

Loop with PHP + JavaScript

I'm trying to create a map with markers, those markers location and content are stored in a database.
Here it is my code:
<?php
$query_map = "SELECT * FROM denuncias ORDER BY id";
$map_executa = mysql_query($query_map);
$lat = -1.456688;
$log = -48.477586;
?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var center = new google.maps.LatLng(<?= $lat ?>, <?= $log ?>);
function init() {
var mapOptions = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
<?php while ($map = mysql_fetch_object($map_executa)) { ?>
var contentString = '<div id="content" style="height: 200px;">'+
'<div id="siteNotice">'+
'</div>'+
'<h3 id="firstHeading" class="firstHeading"><?= $map->titulo ?></h3>'+
'<div id="bodyContent">'+
'<?= $map->descricao ?>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?= $map->lat ?>, <?= $map->log ?>),
map: map,
clickable: true,
title: 'teste'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
<?php } ?>
}
google.maps.event.addDomListener(window, 'load', initialize);
//]]>
</script>
I'm able to get the markers at their correct positions, but the content is always the same: the last row.
Can anyone help me?
Thanks!
Delivered source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Ver denúncias</title>
<!-- CSS -->
<style type="text/css">
body {
background: #3f51b5 !important;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var center = new google.maps.LatLng(-1.456688, -48.477586);
function init() {
var mapOptions = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var contentString = '<div id="content" style="height: 200px;">'+
'<div id="siteNotice">'+
'</div>'+
'<h3 id="firstHeading" class="firstHeading">Nanana</h3>'+
'<div id="bodyContent">'+
'Teste'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-1.458780, -48.480526),
map: map,
clickable: true,
title: 'teste'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
var contentString = '<div id="content" style="height: 200px;">'+
'<div id="siteNotice">'+
'</div>'+
'<h3 id="firstHeading" class="firstHeading">Teste 2</h3>'+
'<div id="bodyContent">'+
'AAAAAAAAAAAAAAAAAAA'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-1.471875, -48.494237),
map: map,
clickable: true,
title: 'teste'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
//]]>
</script> <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body onload="init();">
<nav class="indigo no-pad-bot" role="navigation">
<div class="container" class="parallax-container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo"></a>
<ul id="nav-mobile" class="right side-nav no-pad-bot">
<li>Início</li>
<li>Ver denúncias</li>
<a class="waves-effect waves-light btn-large fazerdenuncia" style="margin-top: 5px; float: right !important">Fazer denúncia</a>
</ul><i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="section no-pad-bot no-pad-top white" id="index-banner">
<div class="row">
<div class="col s12 m8">
<h1>Places to check out in Zagreb</h1>
<section id="sidebar">
<div id="directions_panel"></div>
</section>
<section id="main">
<div id="map_canvas" style="width: 100%; height: 500px;"></div>
</section>
</div>
<div class="col s12 m4 barra flow-text">
<h1>
Últimas denúncias
</h1>
<!-- últimas denuncias -->
<div class="row">
<div class="col s10 m10 offset-s1 offset-m1 z-depth-2 grey lighten-3" id="ultimas-denuncias">
<h2 class="flow-text">
Nanana </h2>
<h2 class="flow-text">
Teste 2 </h2>
</div>
</div>
<div class="col s10 m10 offset-s1 offset-m1">
<p class="ultimos120">Nos últimos 120 dias</p>
<div class="text-center">
<h5 class="flow-text">55 denúncias feitas</h5>
<h5 class=" flow-text">25 denúncias resolvidas</h5>
</div></div>
<!-- fim últimas denúncias -->
</div>
</div>
</div>
<footer class="page-footer grey lighten-2">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="black-text">Sobre este site</h5>
<p class="black-text text-lighten-1">
Esse site é mantido estudantes do ensino médio para lallalallala. <br> Caso queira contribuir para o projeto, clique aqui para fazer uma doação.
</p>
</div>
<div class="col l3 s12">
<h5 class="black-text">Links úteis</h5>
<ul>
<li><a class="black-text" href="#!">Link 1</a></li>
<li><a class="black-text" href="#!">Link 2</a></li>
<li><a class="black-text" href="#!">Link 3</a></li>
<li><a class="black-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<span class="black-text">Feito por</span> <a class="pink-text" href="http://www.mat3.us">mat3.us</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>
Got to make the 2 texts appear, however, both of them appears on the same marker!
<?php
$query_map = "SELECT * FROM denuncias ORDER BY id";
$map_executa = mysql_query($query_map);
$lat = -1.456688;
$log = -48.477586;
$Count = 0;
$i = 0;
?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var center = new google.maps.LatLng(<?= $lat ?>, <?= $log ?>);
function init() {
var mapOptions = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
<?php while ($map = mysql_fetch_object($map_executa)) {
++$Count; ?>
var contentString<?= $Count ?> = '<div id="content" style="height: 200px;">'+
'<div id="siteNotice">'+
'</div>'+
'<h3 id="firstHeading" class="firstHeading"><?= $map->titulo ?></h3>'+
'<div id="bodyContent">'+
'<?= $map->descricao ?>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString<?= $Count ?>,
maxWidth: 400
});
var infowindow1 = new google.maps.InfoWindow({
content: contentString1,
maxWidth: 400
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?= $map->lat ?>, <?= $map->log ?>),
map: map,
clickable: true,
title: 'teste'
});
<?php } ?>
google.maps.event.addListener(marker, 'click', function() {
// Aqui!!!
infowindow.open(map,marker);
infowindow1.open(map,marker);
infowindow2.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
//]]>
</script>
Have I done something wrong?

Try to fetch the Object first and then do a foreach Loop:
<?php
$Count = 0;
$map = mysql_fetch_object($map_executa) :
foreach($map as $marker)) {
++$Count; //This adds 1 to Count every time ?>
var contentString = '<div id="content" style="height: 200px;">'+
'<div id="siteNotice">'+
'</div>'+
'<h3 id="firstHeading" class="firstHeading"><?= $marker->titulo ?></h3>'+
'<div id="bodyContent">'+
'<?= $marker->descricao ?>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?= $marker->lat ?>, <?= $marker->log ?>),
map: map,
clickable: true,
title: 'teste'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
<?php } ?>
A foreach Loop has a better Performance too. See http://php.net/manual/en/control-structures.foreach.php for more Information.
Edit:
You have to Options:
1) Create a new Variable every time; You just need a Count:
var infowindow<?php echo count;?> = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});
2) Use an Array: (Im not exactlly sure about the Array Syntax in JS)
infowindow() = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});
and then call the window with
google.maps.event.addListener(count, marker, 'click', function() {
infowindow(count).open(map,marker);
});
You Need to create an Array for the markers to not just for the infowindows

As you are creating the info window object for each iteration, it will always display the last value because it is overriding the object. Try to place the below code outside the while loop and let me know if you have any issues.
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});
Thank you

how to refresh div tag with onclick button event using jquery

I downloaded this code on google map using jquery mobile from this site. when i run this code direct on the browser, it works but when i called it from another page it display every other content on the page except the google map unless i reload the page. now i need to manually refresh the google map div in the code below when button is clicked using juery eg.
<div id="map_canvas" style="height:300px;" id1="show"></div>
below is the entire code
<!DOCTYPE html>
<html>
<head>
<title>jQuery mobile with Google maps geo directions example</title>
<meta content="en" http-equiv="content-language">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
$(document).on("pageinit", "#map_page", function() {
initialize();
});
$(document).on('click', '#submit', function(e) {
e.preventDefault();
calculateRoute();
});
var directionDisplay,
directionsService = new google.maps.DirectionsService(),
map;
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
//var mapCenter = new google.maps.LatLng(21.5255962, 39.167697299999986);
var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278);
var myOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));
}
function calculateRoute()
{
var selectedMode = $("#mode").val(),
start = $("#from").val(),
end = $("#to").val();
if(start == '' || end == '')
{
// cannot calculate route
$("#results").hide();
return;
}
else
{
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
$("#results").show();
/*
var myRoute = response.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
alert(myRoute.steps[i].instructions);
}
*/
}
else {
$("#results").hide();
}
});
}
}
</script>
</head>
<body>
<div data-role="page" id="map_page">
<div data-role="header">
<h1><a href="#">jQuery mobile - Google maps directions service</h1>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:300px;" id1="show"></div>
<div data-role="fieldcontain">
<label for="from">From</label>
<input type="text" id="from" value="Goteborg, Sweden"/>
</div>
<div data-role="fieldcontain">
<label for="to">To</label>
<input type="text" id="to" value="Stockholm, Sweden"/>
</div>
<div data-role="fieldcontain">
<label for="mode" class="select">Transportation method:</label>
<select name="select-choice-0" id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
</select>
</div>
<input type="button" value="Reload Page" />
<a data-icon="search" data-role="button" href="#" id="submit">Get directions</a>
</div>
<div id="results" style="display:none;">
<div id="directions"></div>
</div>
</div>
</div>
</body>
</html>

Have you tried this?
In your
$(document.ready(function() {
$('#button_click_id').click(function(){
//your code
});
});

Try this.
$("#button_id'").click(function(){ initialize(); });

Google map api v3 shows half a map?

I'm doing a project in Jquery Mobile and having a problem with the Google API. When I navigate to the MapPage from diffrent page the MapPage by itself shows the map OK, but when moving from the HomePage to MapPage it only shows half of the map. If I manually refresh or resize map it will fix it - but I've tried map.resize() without luck so I need a different solution.
I've attached my HTML code of the HomePage and MapPage below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Project - Mobile" />
<meta name="author" content="Yuval Vardi" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RentAcar</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="JS/jquery-2.0.2.js"></script>
<script src="JS/jquery.mobile-1.3.1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="JS/mapScript.js" > </script>
</head>
<body>
<div id="HomePage" data-role="page" data-add-back-btn="true">
<div data-role="header">
</div>
<div data-role="content">
Trip Info
</div>
<div data-role="footer" class="mainFooter">
<h2> © Copyright Yuval Vardi </h2>
<p class="yearNow"> </p>
</div>
</div>
<div id="calculate" data-role="page" data-add-back-btn="true">
<div data-role="header">
</div>
<div data-role="content">
<table id="mapTable">
<tr>
<td>
<p>Pickup location</p>
</td>
<td></td>
<td>
<p>Where do you go?</p>
</td>
</tr>
<tr>
<td>
<input id="startInput" type="text" value="" placeholder="Start location" />
</td>
<td></td>
<td>
<input type="text" id="end" placeholder="Return location"/>
</td>
</tr>
<tr>
<td data-role="controlgroup">
<button id="myLocation" onclick="getMarker()" data-role="button" data-theme="e" > Find me </button>
</td>
<td></td>
<td data-role="controlgroup">
<button onclick="calcRoute()" data-theme="b" > Calculate rout </button>
</td>
</tr>
<tr>
<td colspan="3">
<div id="map-canvas" style="width:400px; height:280px;">
</div>
</td>
</tr>
</table>
</div>
<div data-role="footer" class="mainFooter">
<h2> © Copyright Yuval Vardi </h2>
<p class="yearNow"> </p>
<a class="ui-btn-right" href="#HomePage" data-role="button" data-icon="home" data-iconpos="top" >Home</a>
</div>
</div>
</body></html>
My javascript file:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var israel = new google.maps.LatLng(32.0938254, 34.7786934); // the var for our initial point
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: israel // where to center the map on initial!
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
initialize();
var start = document.getElementById('startInput').value;
var end = document.getElementById('end').value;
var distanceInput = document.getElementById("distance");
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
}
});}
google.maps.event.addDomListener(window, 'load', initialize);
function getMarker() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
}
function showPosition(position) {
var lat=position.coords.latitude;
var long=position.coords.longitude;
marker(lat,long); //calls the marker function
}
function showError(error)
{
alert ("Error loading map");
}
function marker(lat,long) {
var myLatlng = new google.maps.LatLng(lat,long);
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
$("#startInput").attr("value",myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"You are Here!"
});
}

The map div has zero width. To use a percentage width, you have to define the width of all its parents (or at least up to a fixed size element that can be used to compute the width).
See Mike Williams' Google Maps API v2 tutorial page on percentage sizing

You need to call checkResize() API function. Like This:
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.checkResize()
This one worked for me as well

We Keep Coding

JavaScript is the programming language of the Web.

Google map content not displaying inside Bootstrap modal part 2 - javascript

Related

Google Map API - Directions Service does not auto zoom when the map in a modal

Google Maps api show grey screen

Loop with PHP + JavaScript

how to refresh div tag with onclick button event using jquery

Google map api v3 shows half a map?

Categories

Resources