Home/ Questions/Q 7413005
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T06:37:44+00:00

I am trying to build a JQuery Mobile application. I want this application to

  • 0

I am trying to build a JQuery Mobile application. I want this application to include a Google map in it. I was basing my implementation on the jquery-ui-map plugin. They have sample code available at http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map.

Even with that example, I still can’t get a map to appear. I feel like I’m using the most basic code. Can somebody please tell me what I’m doing wrong? My code is shown below:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/resources/scripts/jquery.ui.map.full.min.js" />
</head>

<body>
    <div id="result" data-role="page">
        <div data-role="header"><h1>My App</h1></div>

        <div data-role="content">
          <div id="resultMap" style="height:200px; width:200px; background-color:Lime;">   
          </div>
        </div>
    </div>

    <br /><br />

    <script type="text/javascript">
        $("#result").live("pageshow", function () {
            $("#resultMap").gmap();
        });
    </script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok. I’m doing it like this:

    var home = new google.maps.LatLng(x, y);

$('#directions_map').live("pageshow", function() {
    $('#map_canvas_1').gmap('refresh');
    });

$('#directions_map').live("pagecreate", function() {
    $('#map_canvas_1').gmap({'center': home, 'zoom':17 });
    $('#map_canvas_1').gmap('addMarker', { 'position': home, 'animation' : google.maps.Animation.DROP } );
    });

    So please try:
    – create the gmap on pagecreate
    – only refresh on pageshow
    – the marker is a bonus 😉

    let me know if this does the trick. It’s from a working example of mine, so it should be ok. I think it’s important you set up the gmap ahead of pageshow. If you think of JQM as a stage… pageshow would be right before lifting the curtain. Maybe too late for Google Magic. Pagecreate seems better…

    • 0