Search jQuery

jQuery Forum

Trouble with putting google maps in a collapsible set in jquery mobile.

in jQuery Mobile • 2 years ago

Hello

I'm trying to put a google map in a collapsible set in a jquery mobile site I'm working on. The map skips when moved in the div but outside the div it behaves normally. Does anyone have a solution for this problem?

The code looks like this and it's inside a collapsible-set:

<div data-role="collapsible" data-collapsed="true">
<h3>
Navigation</h3>
<div data-role="content" id="map_canvas" >
<script type="text/javascript">
function initializeMap() {
var latlng = new google.maps.LatLng(64.135338, -21.89521);
var options = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
google.maps.event.trigger(map, 'resize');
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Hello World!"
});
google.maps.event.trigger(map, 'resize');
};
$(function () {
initializeMap();
});
</script>
</div>
</div>

Replies(3)

gamacky

Re: Trouble with putting google maps in a collapsible set in jquery mobile.

2 years ago

Google maps will not render unless it knows the canvas' offsetWidth and offsetHeight. Which means that the canvas must have been rendered with a width and height before calling the map. Usually triggering the resize event helps. But the initial map call must have the canvas' offsetWidth and offsetHeight. So I'm not sure if this will work with collapsible div's.

hazartuner

Re: Trouble with putting google maps in a collapsible set in jquery mobile.

1 year ago

Hi. i think i found a solution. There is a constant class name into collapsible set elements headers called "ui-collapsible-heading" i've bound a "click" event to it. When you click the heading, it setups google map with no errors. Sorry if i couldnt explain it clearly, i'm not very good at english :) i've shared sample code to explain it clearly. You can save the codes into a document and test it.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true&language=tr"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
$(Start);
function Start()
{
$(".ui-collapsible-heading").live("click", function(){
var latlng = new google.maps.LatLng(41.011333, 29.038357);
var myOptions = {zoom: 8,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("googleMap"),myOptions);
var marker = new google.maps.Marker({position: latlng,title: "My Google Map"});
marker.setMap(map);
});
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible-set">
<div data-role='collapsible' data-collapsed=true data-theme='d'>
<h1>Collapsible</h1>
<div id="googleMap" style="width:100%; height:300px;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

yakirmanor

Re: Trouble with putting google maps in a collapsible set in jquery mobile.

4 months ago

great response!!!

to adjust it to jquery mobile 1.2 you need to change the script

from live to click like so:

<script>
   $(document).bind("mobileinit", function () {
   $.mobile.ajaxEnabled = false;
   });

   $(Start);

   function Start() {
      $(".ui-collapsible-heading").click(function () {
      var latlng = new google.maps.LatLng(41.011333, 29.038357);
      var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
      var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
      var marker = new google.maps.Marker({ position: latlng, title: "My Google Map" });

      marker.setMap(map);
   });
   }
</script>

id also recommend this script (with tag names and stuff):

can also be seen here :
http://jsfiddle.net/yakirmanor/wzcAZ/
or with custom images here:
http://jsfiddle.net/yakirmanor/CzkfG/

<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
$(Start);
function Start() {
$(".ui-collapsible-heading").click(function () {
var locations = [
['<br/>Main Office', 31.590496, 34.561981, 4],
['Sensor 16<br/>User Name: 16_DE-1R', 31.590595, 34.562980, 5],
['Sensor 17<br/>User Name: 17_TEN-2MP', 31.590694, 34.563979, 3],
['Sensor 18<br/>User Name: 18_TEN-2MP', 31.590793, 34.564978, 2],
];
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 17,
center: new google.maps.LatLng(31.590892, 34.561977),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
});
}
</script>

Top Reply

Response title

Attachments

jQuery Forum

Trouble with putting google maps in a collapsible set in jquery mobile.

Replies(3)

Re: Trouble with putting google maps in a collapsible set in jquery mobile.

Re: Trouble with putting google maps in a collapsible set in jquery mobile.

Re: Trouble with putting google maps in a collapsible set in jquery mobile.

Statistics

Tags

Actions

Related Posts