Google Maps inside jQuery Mobile

elroyjets..

Re: Google Maps inside jQuery Mobile

7 years ago

It may be as simple as making a call to google.maps.event.trigger(map,'resize');

It might help if you post the code or a link so that we can recreate the issue.

mayur.ten..

Re: Re: Google Maps inside jQuery Mobile

7 years ago

Thanks for the quick reply. I've used following code to achieve this task.

if (Modernizr.geolocation) {
        navigator.geolocation.getCurrentPosition(show_map, handle_error);
    }
    else {
        alert("not supported");
    }
    function show_map(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var initialLocation = new google.maps.LatLng(latitude, longitude);
        var myOptions = {
            zoom: 8, 
            center: initialLocation, 
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_content"), 
                                      myOptions);
        google.maps.event.trigger(map, 'resize');
    }
    function handle_error(err) {
        if (err.code == 1) {
        }
    }
Here, map_content is having the data-role of 'content'.

Even, if I don't set any height/width for this map_content and use google.map.event.trigger(map, 'resize'), it doesn't show anything. 

Thanks.

sarkerazad

Re: Re: Google Maps inside jQuery Mobile

5 years ago

Hi James,

Could you please help me to resolve the map floating issue. I have followed your post and created map for android mobile. But the map is floating and not rendering correctly like in proper page area in Android Emulator. Please find bellow the code:
<div data-role="page" id="location" data-theme="a"
        data-dom-cache="true">
        <header data-role="header" class="custom_header">
            <a href="#home" data-icon="arrow-l" data-iconpos="notext"
                data-role="button" data-rel="back" data-theme="a" data-ajax="false">Back</a>
            <a href="#home" data-ajax="false"><img border="0"
                src="http://i1063.photobucket.com/albums/t514/sarkerazad/VTS_Logo_S_zps561d776e.png"
                alt="Logo, VTS" style="float: center; display: inline" /> <a
                href="#home" data-icon="home" data-iconpos="notext"
                data-direction="reverse" class="ui-btn-right jqm-home"
                data-ajax="false">Home</a>
        </header>
        <section id="mainContent">
            <title>Geolocation Map Test (1.1.3)</title>
            <div data-role="content"><p>Map</p></div>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            </header>
            <style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0
}

#map_canvas {
    height: 100%
}
</style>
            <script type="text/javascript"
                src="https://maps.googleapis.com/maps/api/js?key=.....&sensor=false">

            </script>
            <script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
initialize(position.coords.latitude,position.coords.longitude);
});
}
});
function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(....., ...),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var firstmap = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

    var point = new google.maps.LatLng(....., ...);
    var marker = new google.maps.Marker({
        position:point,
        map:firstmap,
        title:'Hello VTS',
        draggable:false,
    });

}


</script>
            </head>
            <body onload="initialize()">
                <div id="map_canvas" style="width: 325px; height: 475px"></div>
            </head>
            <body>
                <div id="map_canvas"></div>

                

                <div data-role="footer" data-position="fixed">
                    <nav data-role="navbar">
                        <ul>
                            <li><a href="#home" data-icon="home">Home</a></li>
                            <li><a href="#technology" data-icon="star">Our
                                    Technology</a></li>
                        </ul>
                    </nav>
                </div>
                
    </div>
    

I can't figure out what is wrong to protect the floating and rendering correctly into page. Please help me. Your co-operation will be highly appreciated.
Regard
Azad

Attachments

Map-Image.png
Size : 430.23 KB Downloads : 1326 Download

elroyjets..

Re: Google Maps inside jQuery Mobile

7 years ago

Here is a sample that I have tested in Mobile Safari on an iPad, Mobile browser on Android, and in Google Chrome on the desk top and it works fine in all three.

The setup is your main page (index.html) and then a map page (map.html). All the javascript code is in the main page.

index.html

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Main Page</h1></div>
<div data-role="content"><p><a href="map.html">Map</a></p></div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
initialize(position.coords.latitude,position.coords.longitude);
});
}
});
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
</body>
</html>

map.html

<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>

mayur.ten..

Re: Re: Google Maps inside jQuery Mobile

7 years ago

Thanks.
This is a perfect solution. The map renders perfectly and looks fine.

kurteknikk

Re: Re: Google Maps inside jQuery Mobile

7 years ago

Hi,

First of all thanks for your "solution", but i don't understand why this works. I assume its a bug from jquery mobile right ?

Could you please explain why this is needed ? This is insane, i mean i never know which is the previous page which links to my page containing a map. I mean i can got through all my pages and check where there's a link for that particular page, but that's not good programming.

I'm asking because if there's an issue we should report it on github so they can solve it...

Btw, in my implementation i'm just putting the link to gmaps in the "first" page any other code can be in the page containing the map. But i still need to do more testing...

mayur.ten..

Re: Re: Google Maps inside jQuery Mobile

7 years ago

Hi,
I modified my code to implement login functionality. index.html (with menu and link to map.html) loads first. It checks jStorage for login details. If not found it loads login.html [using $(window).attr('location', 'login.html');] Once login is done and user is authenticated, values are stores in jStorage and user goes to index.html again, using the same attr functionality.
However, when I navigate from index to map file, the map doesn't look good and whole UI is changed. There is no header with title. Whereas, header contains some part of map. Please find below attached UI screen-shot for more details.
I'm using the same above code, which worked previously.
Thanks.

polyfade

Re: Re: Google Maps inside jQuery Mobile

7 years ago

Unfortunately, now that jQuery has been updated to 1.4.4, this solution doesn't work like before. I think it has something to do with the vital bug that needs addressing -- http://forum.jquery.com/topic/page-link-from-list-to-another-list-doesn-t-work-2nd-page-is-in-plain-html. I can use jQuery 1.4.3, but then that leaves me without button icons and transitions. Plus, it doesn't hide the location bar properly. See screenshots

Attachments

jquery-mobile-map.jpg
Size : 99.06 KB Downloads : 4196 Download

jcorry

Re: Re: Google Maps inside jQuery Mobile

7 years ago

I don't understand...I'm doing exactly the same thing on my page, but it only 'works' intermittently.

Even when it 'works' (#map_canvas is updated by the initialize function), the #map_canvas div doesn't display and I don't see the map.

The URL is here:

http://mhta.blackdogadvertising.com/#/tours/keywest/pirates

This is extremely confusing to troubleshoot...I've been doing basic things with jQuery (Ajax and UI features) for a little over a year but am new to jQ mobile.

Any suggestions? I'm behind on this proof-of-concept project I'm working on and the map feature is essential...

UPDATE: it works on my local development machine...but not on the server. I'm using Codeigniter for routing and multi-language capabilities, not sure if that has anything to do with it. Any suggestions on where to start looking for problems?

mamikel

Re: Re: Google Maps inside jQuery Mobile

7 years ago

thanks for posting this, I was wondering if someone could help as I've I created two files index.html and map.html and pasted in the code exactly as above. When I ran up the application it asked my permission to gain my current location to which I said yes. When I click on Map, it navigates to the map.html page but I get a blank canvas. Any ideas?

thanks

Matt

haresh.ka..

Re: Re: Google Maps inside jQuery Mobile

6 years ago

These code me not propare work so how to use

hiulit

Re: Google Maps inside jQuery Mobile

7 years ago

I wanna have to Google Maps in to diferent pages linked to each other.

Is it possible not using "rel=external"?

hiulit

Re: Google Maps inside jQuery Mobile

7 years ago

I wanna have two Google Maps in two diferent pages linked to each other.

Is it possible not using "rel=external"?

kurteknikk

Re: Re: Google Maps inside jQuery Mobile

7 years ago

Please read elroyjetson's reply that "solves" the problem, even though i don't understand exactly why...

elroyjets..

Re: Re: Google Maps inside jQuery Mobile

7 years ago

There are two keys to the solution above.

First, if you want to manipulate a page after the page has been initialize, it has to be wrapped in a pagecreate event handler: (see events page in demos and docs). When you add a map, it is occurring after the page has been initialized.

The second issue, which was the map taking up the full screen has to do with the fact that you cannot set a child element to a relative height and width unless the parent is also relative. So that is why each element is set to a relative height and width.

I hope that explains things better.

spvlog

Re: Google Maps inside jQuery Mobile

7 years ago

I need google map functionality in my mobile web application. this Script works fine on Android and iPhone platform. But in Blackberry OS5 it doesn't show map. It is very important for me.

mykaforce

Re: Google Maps inside jQuery Mobile

7 years ago

The info above was really handy, many thanks. I can now load a map whereby you get the users current location as per example above.

Does anyone know how we can show the users current location, and then a location of a fixed known address.The use case would be where we have a marker showing a location of a store(place), and the users location in relation to the store. The nice to have would be showing directions from users current location.

I know this is more one for google maps api, however location is a key part of mobile sites, and it would be great to have this all tied up within the great stuff we can do with jQuery.

bsender

Re: Google Maps inside jQuery Mobile

7 years ago

I'm having the exact same problem with google maps and jQuery Mobile.

google.maps.event.trigger(map,'resize') worked for me. Thanks elroyjetson!

browndash

Re: Google Maps inside jQuery Mobile

7 years ago

Hi All,

I have tried the code above but I am still having some issues. I hope one of you can help. In my case, I have a list of buildings, so potentially someone will select and building, view its location on a google map and then click "back" and select another building.
The first time they select a building, everything works fine, but when they click back and select the second building, the map does not show (until I hit refresh which is not ideal). I have a pagecreate and pageshow event binding, but still no luck. Here is my code;

<script type="text/javascript">
var map1, latlng1, options1;
function initialize() {
// create the map
var latlng1 = new google.maps.LatLng(<?php print $data['latitude']; ?>,<?php print $data['longitude']; ?>);
var options1 = {
zoom: 16,
center: latlng1,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map1 = new google.maps.Map(document.getElementById('map_canvas'), options1);
// load the marker
var image = new google.maps.MarkerImage("/images/markers/<?php print $marker_type; ?>.png",new google.maps.Size(32, 37));
var shadowi = new google.maps.MarkerImage("/images/markers/shadow.png",new google.maps.Size(51, 37));
var myLatLng = new google.maps.LatLng(<?php print $data['latitude']; ?>,<?php print $data['longitude']; ?>);
var Marker = new google.maps.Marker({
position: myLatLng,
map: map1,
shadow: shadowi,
icon: image
});
// return map1;
}
$('#map-detail').live('pagecreate', function() {
initialize();
});
$('#map-detail').live('pageshow', function() {
google.maps.event.trigger(map1, 'resize');
map1.setOptions(options1);
});

Where am I going wrong? jQ a3 and Gm v3

johansall..

Re: Google Maps inside jQuery Mobile

7 years ago

There is an example here or you can use the jQuery UI Google maps plugin (see example with jquery mobile)

sheldond

Re: Re: Google Maps inside jQuery Mobile

7 years ago

I keep getting this error what could be the problem

An invalid or illegal string was specified" code: "12
http://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/5/6a/main.js
Line 92

my map just doesnt load because of this error.

libby.bal..

Re: Google Maps inside jQuery Mobile

7 years ago

This tutorial uses the jQuery plugin mentioned above. It's a map app using PhoneGap/Android.

If you're not using Android - the source code is there, too.

Video demo of the demo/tutorial app.

Libby

usedcarsi..

Re: Google Maps inside jQuery Mobile

7 years ago

I thought I had this same problem with the Google maps. We found out that I had the wrong Google maps API key.

[url=http://www.used-carsincolorado.com]used cars in colorado[/url]

ranthony11

Re: Google Maps inside jQuery Mobile

7 years ago

Has anyone managed to solve the issue of the map page loading a blank screen on second load?

i.e. I have a list of locations which pass in lat and lng to the map detail page when clicked. the first location clicked will always render properly, but when you go back to the list and click a second one, it will only show a blank screen.

I have seen a few other people on the forum with this issue but no solutions yet. This has been driving me nuts for a few days now.

ranthony11

Re: Re: Google Maps inside jQuery Mobile

7 years ago

I finally managed to get this working after a lot of banging my head on the desk. Basically, you need the div of the page holding the map and the div of the map_canvas itself to have unique names. Here's my code (it's coldfusion but obviously you could do the same with php, asp, etc):

JS on index page:

var lat,lng,mapid;

// When map page opens initialize map

// I used pageshow instead of pagecreate, pagecreate wasn't working

$('.page-map').live("pageshow", function() {

initialize(lat,lng,mapid);

});

// initialize function draws the map in the canvas div

function initialize(lat,lng,mapid) {

var latlng = new google.maps.LatLng(lat, lng);

var myOptions = {

zoom: 18,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById(mapid),myOptions);

}

</script>

And then my map details page, which gets called like:

map.cfm?place=(id)&name=(name)&lat=(coordinate)&lng=(coordinate)

</div>

var lat = #lat#;

var lng = #lng#;

var mapid = 'map_canvas_' + '#place#';

</script>

</div>

</cfoutput>

Making both the map page id and canvas id uniquely named seems to fix the problem with subsequent visits to the map page producing a "blank" map.

Hope that helps somebody!

Cheers.

wolfie1

Re: Re: Google Maps inside jQuery Mobile

6 years ago

I am experiencing a blank map. From the map page when I push the back button on my android phone the map briefly flashes. I tried using different ids for the map canvas div and page containing the map, but no luck.

sheldond

Re: Google Maps inside jQuery Mobile

7 years ago

I keep getting an error in firefox as a result the map is not loaded

An invalid or illegal string was specified" code: "12

(92 out of range 42)

i dont understand, on google this error is related to id having a digit but all my id's are alphabets.

mark.desi..

Re: Google Maps inside jQuery Mobile

6 years ago

Try to create the map on the "pageshow" event (an event of jQuery mobile):

$('#map_page').live('pageshow',function(event, ui){

var map = new google.maps.Map(document.getElementById("map_canvas"), options);

});

guillaume..

Re: Google Maps inside jQuery Mobile

6 years ago

Hi,

The answer given by elroyjetson is OK with jquery.mobile-1.0a1.min and jquery.mobile-1.0a1.min.css but with "newest" version (jquery.mobile-1.0b3.min and jquery.mobile-1.0b3.min.cs)s, the map doesn't appear.

Maybe a problem with the "height:100% and width:100%" on each previous div...

Can you help me ?
Thanks.

csharpsav..

Re: Re: Google Maps inside jQuery Mobile

6 years ago

Guillaumecardon, can you post your code so I can take a look at it?

I'm using Beta 3 and it displays the map just fine.

Thanks

-csharpsavant

guillaume..

Re: Google Maps inside jQuery Mobile

6 years ago

Main page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr, en" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<!-- GOOD VERSION
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=FR&libraries=geometry"></script>
<script type="text/javascript" src="js/meetus_geo.js?163701"></script>
</head>
<body>
<div data-role="page" data-theme="c" style="width:100%; height:100%;padding:0px;">
<div data-role="header" data-theme="b">
<h1>DGI - Mobile</h1>
<div id="alerte_retour" class="alerte3"></div>
</div>
<div data-role="content" data-theme="b" style="width:100%; height:100%;padding:0px;">
<script> function add_marker(){ var debug = 0;}</script>
<div id="retour" style="width:100%; height:100%;"></div>
<script type="text/javascript">
$.ajax({type: "POST", url: "ajax_meetus.php", data : "mode=charge_map", dataType: "html", timeout: 7000,
success: function(retour){
$('#retour').html(retour);
load();
}
});
</script>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><a data-role="button" data-icon="arrow-r" href="mobile-enregistrer-ma-localisation.html">Je suis dans...</a></div>
<div class="ui-block-b"><a data-role="button" data-icon="arrow-r" href="version-mobile.html">Accueil</a></div>
</fieldset>
</div>
</div>
</body>
</html>

When page is loaded, a scrip with ajax is called "ajax_meetus.php"

<?php
$mode = $_POST['mode'];
switch ($mode)
{
case "charge_map":
echo '
<div data-role="page" data-theme="b" style="width:100%; height:100%">
<div data-role="content" style="width:100%; height:100%">
<div id="map" style="width:100%; height:100%"></div>
</div>
</div>';
break;
default:
break;
}
?>

The map was send in the div called "retour" and a new function JS is called "load()"

function load() {
map = new google.maps.Map(document.getElementById("map"), {zoom: 18,center: new google.maps.LatLng(48.870181, 2.779852),mapTypeId: google.maps.MapTypeId.SATELLITE, mapTypeControl: false, streetViewControl: false, navigationControl: true});
marker = new google.maps.Marker({position: new google.maps.LatLng(0,0),map: map });
add_marker();
google.maps.event.trigger(map, 'resize');
}

i clean up the code of comment, meta tags, etc..

mikbak

Re: Google Maps inside jQuery Mobile

6 years ago

Got mine working after lots of tries, but had to fudge it...

http://www.pcnpa.org.uk/Touchscreens/startup.asp

L Lawliet

Re: Google Maps inside jQuery Mobile

6 years ago

hello wanna share this.. =)

i use here the jquerymobile beta 3 and googleAPI v3 =)

the content of my page looks like this..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

$('#map_result').live('pageshow',function(event){

loadMap(48.870181,2.779852);

});

function loadMap(Lat, Long){

var myLatlng = new google.maps.LatLng(Lat, Long);

var myOptions = {

zoom: 13,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

</script>

</head>

<body>

<h1>MAP V3 Sample!</h1>

</div>

</fieldset>

</div>

<h1>Footer</h1>

</div>

</body>

</html>

Also as far as I know.. GoogleMap API is separate library.. if its not working check your code on how you display the map, display the markers, etc.. JQM is just a container for it.. Google maps will work without JQM =)..

So far.. I've done getting nearby places with given radius without problem in displaying it =)...

good luck guys

hope i help someone who needs this code =)

emredenx

Re: Re: Google Maps inside jQuery Mobile

6 years ago

$('#map_result').live('pageshow',function(event){

loadMap(48.870181,2.779852);

});

function loadMap(Lat, Long){

var myLatlng = new google.maps.LatLng(Lat, Long);

var myOptions = {

zoom: 13,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

</script>

this code perfectly...what is the gmap3 version of this code...thanks..................

I want to apply this code = $('#kdkmap')

.gmap3(

{ action:'init',

options:{center:[40.95762,29.08636],

zoom: 17 }},

{ action: 'addMarkers',

markers:[{lat:40.957628, lng:29.08636}],});

pentry

Re: Google Maps inside jQuery Mobile

6 years ago

Hi,

I've had the same problem with map_canvas not showing up in jqm.

Especially if you like to show the map in full screen and specify the height in %.

The problem is almost always the css of the html, body, wrapper and canvas.

In the code attached, based on the latest example above, i've included the necessary css for the map to show up.

Hope this will help someone.

<!DOCTYPE html>

<head>

$('#map_result').live('pageshow',function(event){

loadMap(48.870181,2.779852);

});

function loadMap(Lat, Long){

var myLatlng = new google.maps.LatLng(Lat, Long);

var myOptions = {

zoom: 13,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

</script>

<style>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_result{width:100%; height:100%;}

#map_canvas{width:100%; height:92%;padding:0;}

</style>

</head>

<body>

<h1>MAP V3 Sample</h1>

</div>

</div>

</body>

</html>

Marcus

L Lawliet

Re: Google Maps inside jQuery Mobile

6 years ago

hello marcus..

i guess you should use px not percent.. after all who wants the whole map to be seen in ur mobile device??

Its just like.. Ok i see the map in fullscreen then what?? haha...

=) maybe setting height is a good way..

cheers!

pentry

Re: Re: Google Maps inside jQuery Mobile

6 years ago

hi Kenster,

my code was meant for those who have problems with rendering a full screen map.

Such like jQuery mobiles own example: http://jquerymobile.com/test/experiments/google-maps/map.html, the Google maps app and many more map based native and web apps for mobile and desktop devices.
When you see the map in full screen with height value set in % then you get the same experience on different sized and oriented screens, thus taking advantage of the devices full ability. The look of a map with 350px height on for example an iPad is a whole different experience then of one where height is set to 100%.

Then you might add a nav bar for a more native feel and look.

Like this one: http://newspapermap.com/USmobil.html

Cheers,

Marcus

bradycolt..

Re: Google Maps inside jQuery Mobile

6 years ago

Anyone try the example above...

http://newspapermap.com/USmobil.html

The bottom nav bar constantly flickers.

Viewing on an iPhone 4s

mikbak

Re: Google Maps inside jQuery Mobile

6 years ago

The main link doesn't work on that..

I have tried many ways to get my maps working however I ended up with an Iframe within the page..

click thorugh here to see ...

http://www.pembrokeshirecoast.org.uk/apps/AccommApp/default.asp

Found it useful across many apps..

kendeeds

Re: Google Maps inside jQuery Mobile

6 years ago

I found the height of my screen and subtracted the height of my footer and header, and set the map to this height. I then added a setTimout real short just to give the div time tor resize and seems to work:

$("#mapView").live('pageinit', function() {

var mapheight=$(window).height() - 263;

var mapwidth=$(window).width();

$("#map_canvas").height(mapheight);

$("#map_canvas").width(mapwidth);

setTimeout("initialize()",150);

});

function initialize() {

var myOptions = {

center: new google.maps.LatLng(user_position.coords.latitude, user_position.coords.longitude),

zoom: 15,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"),

myOptions);

}

kamleshbe..

Re: Re: Google Maps inside jQuery Mobile

6 years ago

My map application not working with jquery version jquery-1.6.4.min.js , map is render but not visible on map_canvas ,

Please tell me solution....

terran.br..

Re: Re: Google Maps inside jQuery Mobile

6 years ago

Just a quick thanks - I found this really useful. Having tried I don't know how many methods setting the time out to refresh the map was just what I needed. I have not idea why this is needed but it does seem a common problem.

BTW The added benifit of the height and width setting also helps as oddly I could set the width using %% but not the height.... for that I had to use px.... strange.

T

EDIT: This may be a given but I'm learning my self.... if you use this solution make sure you have 'map' and other google items set as global or odd things happen with the screen and any markers....

zSprawl

Re: Google Maps inside jQuery Mobile

6 years ago

I just recently finished a practice App (I wanted to learn more about the GPS and compass) that calls Google Maps and places the map in the middle of the compass dial. I blogged a little bit about it earlier today, perhaps it will help you.

http://zsprawl.com/iOS/2012/03/using-phonegap-with-google-maps/

---
http://zsprawl.com

llajta9

Re: Google Maps inside jQuery Mobile

6 years ago

I have similar problem but I am using kml (xml) file to pull the data and get the map....here are the pictures and code...

function initialize() {

var Santiago = new google.maps.LatLng(-70.573738,-33.389854);

var myOptions = {

zoom: 6,

center: Santiago,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var ctaLayer = new google.maps.KmlLayer('http://yoursite.com/kml/KML_file.kml');

ctaLayer.setMap(map);

}

First:

After-refreshing the browser

llajta9

Re: Re: Google Maps inside jQuery Mobile

6 years ago

Sorry and

</div>

jQuery version:

mokesmokes

Re: Google Maps inside jQuery Mobile

6 years ago

My Google maps issues went away after I displayed/updated the map only after "pageshow" event.

Fiddling with the map prior to the page being fully displayed always produced strange behavior.

This also explains why your map looks good after refresh but not before.

llajta9

Re: Google Maps inside jQuery Mobile

6 years ago

No Solutions!

gordonmaps

Re: Google Maps inside jQuery Mobile

6 years ago

I tried the "pageshow' mentioned by mokesmokes. While it succeeded in showing the whole page in a desktop browser, it also introduced another problem to solve: it overwrites my customized map when that map is displayed by a user selecting a map marker from a location list.

Here's the pageshow function:

$('#map').live('pageshow',function(event){

loadMap(34.700817, -86.742943);

});

And here’s the beginning of the non-global function which creates the map and its markers:

function loadMap(Lat, Long){

var latlng = new google.maps.LatLng(34.7233, -86.7348);

var MY_MAPTYPE_ID = "Map";

Can someone suggestion how to integrate the pageshow with the map I've created with the loadMap function?

savvyx4

Re: Google Maps inside jQuery Mobile

6 years ago

I was able to solve this issue by creating the map and all related handlers in pageinit, and by doing a refresh in pageshow:

$('#your-page-id').live("pageshow", function() {

$('#map_canvas').gmap('refresh');

});

This solved the partial draw issue, and everything I'd already done with markers and event handlers continued working as expected.

gordonmaps

Re: Google Maps inside jQuery Mobile

6 years ago

Sawyx4...thanks for the reply!

I fixed this by changing my pageshow to pageinit. Now the Locations dialog I created, listing all the points-of-interest on the map, flips back to the map and the appropriate info bubble displays.

Now I've got two challenges:

1. the html of the info bubble causes it to display differently than had the user tapped on the marker icon without picking it from the Locations list,

2. the header typically disappears when the dialog flips back to the map...not ideal.

BTW: Map has moved to http://www.maposity.com/guerrilla

hendrik.v..

Re: Google Maps inside jQuery Mobile

6 years ago

kendeeds solution worked for me: adding a small timeout before initializing.

setTimeout("initialize()",150);

TY!!

ankit.cho..

Re: Google Maps inside jQuery Mobile

6 years ago

Google map not scrolling in windows phone 7 using jquery mobile any one help me please

ankit.cho..

Re: Google Maps inside jQuery Mobile

6 years ago

Google map not scrolling in windows phone 7 using jquery mobile any one help me please

cosmin.on..

Re: Google Maps inside jQuery Mobile

5 years ago

I succesfully made it work based on another example I found on the internet. I am using jQuery 1.7.1 and jQuery mobile 1.1.1. It is tested on iphone4s, android browser and on the desktop(explorer, firefox, chrome, opera). If you want the source code write me at: bboydflo [at] gmail [dot] com. actually you can get it there. the link of the app is florin-cosmin.dk/mobile/foodjs/index.html

good luck!

Attachments

foodjs.zip
Size : 101.09 KB Downloads : 1625 Download

gabriellu..

Re: Google Maps inside jQuery Mobile

5 years ago

The elroyjetson is the best solution but jquery mobile change and unset the height:100% in the div with data-role="page", and set a min-height. So div map_canvas don't fill with the height:100%.

The solution is in:

<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>

Set te position:relative in div with data-role="page" and position:absolute in div with data-role="content":

<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;position:relative">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;position:absolute">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>

xuanyinwe..

Re: Google Maps inside jQuery Mobile

4 years ago

HI there, I create a Google map on my jQuery mobile site follow an example

it has to use <body onload="initialize()"> to make the map work,

now I want to not using onload="initialize()" in the <body> what should I change on the JS. Link: http://www.xuanyinwen.com/jquery/jquerymap/demos/test.html

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="shortcut icon" href="http://computersforpeople.info/websites/images/favicon.ico">
<link rel="apple-touch-icon" sizes="72x72" href="http://computersforpeople.info/websites/Icons/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="http://computersforpeople.info/websites/Icons/apple-touch-icon-114x114.png"/>
<link rel="icon" type="image/png" href="http://computersforpeople.info/websites/Icons/icon48.png" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://computersforpeople.info/websites/scripts/jquery-1.9.1.min.js"></script>
<script src="http://computersforpeople.info/websites/scripts/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<link href="http://computersforpeople.info/websites/scripts/jquery/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('a').live('click', function() {
var $this = $(this);
if ( !$this.attr('rel') || $this.attr('rel') != 'external' )
$(document.getElementById( $this.attr('href') )).remove();
});
});
</script>
<style type="text/css">
<!--
.style1 {font-size: large}
-->
</style>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1>test</h1>
<div align="center">
</div>
</div>
<ul data-role="listview" data-inset="true" data-filter="false">
<div data-role="collapsible-set" style="padding-left: 10px; padding-bottom: 10px;">
<ul data-role="listview" data-filter="false" id="test-more" >
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var address ="6 Westbury Crescent Remuera NZ";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(600,400)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
<div data-role="collapsible" data-collapsed="false">
<h3>Map</h3>
<p>
<div align="center"><font size="2" color="#0000AA" face="Verdana, Arial, Helvetica, Sans-Serif"><b>
<div id="map_canvas" style="width: 300px; height: 200px"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</b></font>
<font size="2" face="Arial, Helvetica, sans-serif">
<br>
<strong>Map location not guaranteed</strong> </font> </div>
</p>
</div>
</div>
</ul> <br />
<li><a href="#contact_us" data-role="button" data-icon="info" data-iconpos="left" data-rel="dialog" data-transition="pop" id="contact">Contact Geoff Duncan</a></li>
</ul>
</div>
<div data-role="page" id="contact_us" data-title="Contact Us">
<div data-role="header">
<h1></h1>
</div>
</body>
</html>

watusiware

Re: Google Maps inside jQuery Mobile

4 years ago

$( document ).ready(function() {
$('a').live('click', function() {

http://demos.jquerymobile.com/1.3.2/faq/dom-ready-not-working.html

.live() was REMOVED as of jQuery 1.9. Use current documentation.

http://api.jquery.com/live/

(But I wouldn't be using 1.9.1 as you are. Latest version with compatibility for all browsers is 1.11.1.)

Google Maps has been solved several times in this forum. Search it. I recommend using jquery.ui.map plugin, which, although a jQuery UI plugin, is one of the few specifically designed to also work with jQuery Mobile.. You'll like find some help on using it with jQuery Mobile on it's support site.

I'd recommend removing unnecessary scripts while debugging. You've got scripts here that aren't needed to test maps, and as well, you have duplicated the same scripts more than once.

Response title

Attachments

Replies(57)

Attachments

Attachments

Attachments

Statistics

Tags

Actions

Related Posts