CODEWITHSUNDEEP
google-mapsjquery-mobile
user481610
user481610

Reputation: 3270

Google Maps and Jquery Mobile not working together

This is my first time using jQuery and Google Maps. As such I've literally copy and pasted the google maps hello world page and include the jQuery Mobile and I just get an empty page saying "Loading". I'm ready not sure why?

HTML and JS:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mystyles.css">
    <link rel="stylesheet" href="css/jquery.mobile.css"/>
    <link rel="stylesheet" href="css/jquery.mobile.structure.css"/>

    <script type="text/javascript" 
      src="https://maps.googleapis.com/maps/api/js?key=[key]&sensor=true">
    </script>

    <script type="text/javascript"  src="js/myscript.js"></script>
    <script type="text/javascript"  src="js/cordova-2.3.0.js"></script>

    <script type="text/javascript">
          function initialize()
          {
            var mapOptions = {
              center: new google.maps.LatLng(-34.397, 150.644),
              zoom: 8
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
          }
    </script>


  </head>
  <body onload="initialize()">
      <div id="map-canvas"></div>
  </body>
</html>

Where it says MYAPIKEY I put my key there. I'm not sure how these are falling apart??

UPDATE

Changed code to above. When I remove the links to my jQuery Mobile files everything loads fine...

Upvotes: 0

Views: 88

Answers (2)

Alkis Kalogeris
Alkis Kalogeris

Reputation: 17735

Check this working demo

  1. google.maps.event.addDomListener(window, 'load', initialize); This is not needed. Here you add a listener on window load event and you tell it to call initialize. You don't provide any initialize function though. In any case you already have an event listener (pageinit or pageshow) using jqm.
  2. You didn't provide a height for your container. Although your container will have width by it's parent container, it won't have any height. So even if the map loads correctly it won't appear.
  3. You try to use jquery and jquery mobile before including them. You first include and then use.

Upvotes: 1

Carlos487
Carlos487

Reputation: 1489

I would recommend using the pageshow event rather than pageinit because the later is too early in the page lifecycle

$(document).on('pageshow', ...);

Also avoid using a self closing tag in map canvas

<div id="map-canvas"></div>

Upvotes: 0

Related Questions