Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2013
    Thanked 0 Times in 0 Posts

    JQuery Mobile/Google Map issue (polygons)

    <!DOCTYPE html>
        <Title>UNG Partial Tour</Title>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" type="text/javascript"></script>
        <script src="http://maps.google.com/maps/api/js?sensorv=3exp&sensor=false" type="text/javascript"></script>
        <script src="jquery.ui.map.full.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                    var campus = new google.maps.LatLng(34.528568, -83.98623);
                    var mapOptions={
                    center: campus,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                    $('#map_canvas').gmap(mapOptions).bind('init', function(){
                      for (x=0; x<4; x++)
                        $('#map_canvas').gmap('addShape', 'Polygon', {'strokeColor: "orange", strokeWeight: 1, fillColor:"red", fillOpacity: 0.3, path: buildings[x]});
                    });//Map creator
            var buildings=[
              [ //Student Center coordinates
                  new google.maps.LatLng(34.529894171986996,-83.98563981056213),
      	      new google.maps.LatLng(34.53010630154748,-83.98535013198852),
    	      new google.maps.LatLng(34.530477526978004,-83.98569881916046),
    	      new google.maps.LatLng(34.530428914218184,-83.98581147193909),
    	      new google.maps.LatLng(34.53064104241644,-83.98600459098816),
    	      new google.maps.LatLng(34.53054823639619,-83.98617088794708),
    	      new google.maps.LatLng(34.53033168861337,-83.98594558238983),
    	      new google.maps.LatLng(34.5302653983632,-83.98602068424225),
    	      new google.maps.LatLng(34.529894171986996,-83.98563981056213)],
              [ // Infirmary coordinates
    	      new google.maps.LatLng(34.529299764402545,-83.98845344781875),
                  new google.maps.LatLng(34.529321861414715,-83.98856610059738),
                  new google.maps.LatLng(34.52941024940469,-83.98852050304413),
                  new google.maps.LatLng(34.52944781427204,-83.98867338895798),
                  new google.maps.LatLng(34.52955166999356,-83.98861706256866),
                  new google.maps.LatLng(34.529516314868864,-83.98848295211792),
                  new google.maps.LatLng(34.52956271846696,-83.98845076560974),
                  new google.maps.LatLng(34.529531782737756,-83.98835152387619),
                  new google.maps.LatLng(34.529299764402545,-83.98845344781875)],
              [ // Library coordinates
                  new google.maps.LatLng(34.527799363561634,-83.98244261741638),
    	      new google.maps.LatLng(34.5276491010162,-83.98207783699035),
    	      new google.maps.LatLng(34.526959657626165,-83.98252308368683),
    	      new google.maps.LatLng(34.52709224333675,-83.98287177085876),
    	      new google.maps.LatLng(34.527799363561634,-83.98244261741638)],
              [//Dining Hall coordinates
                  new google.maps.LatLng(34.528873,-83.988043),
                  new google.maps.LatLng(34.528887,-83.987893),
                  new google.maps.LatLng(34.528445,-83.987904),
                  new google.maps.LatLng(34.528445,-83.988054),
                  new google.maps.LatLng(34.528873,-83.988043),]];
        <script type="text/javascript">$.mobile.loadingMessage = false;</script>
      <body style="background-color:blue;">
        <div data-role="page" id='map_page'>
          <p style="text-align: center; font-size: 3.0em;">UNG Tour</p>
          <p style="text-align: center; font-size: 2.0em;">A tour of student resource buildings (no classrooms or dorms)</p>
          <div data-role="content" id="map_canvas" style="border-style:inset; margin-left: auto; margin-right: auto; border-color: yellow; height:500px; width: 500px;" >
    I know, it's messy, I'm literally learning JQuery as I go.

    The issue: All of this worked fine, until I appended this code to the map:
    .bind('init', function(){
                      for (x=0; x<4; x++)
                        $('#map_canvas').gmap('addShape', 'Polygon', {'strokeColor: "orange", strokeWeight: 1, fillColor:"red", fillOpacity: 0.3, path: buildings[x]});
    Afterwards, the map will not show up. This is due tonight, and this is currently holding me up. The rest of my idea is simple: have the polygons open later-added page divs with information on the buildings I'm overlaying. I just need the polygons to show up first. Can anyone help me? I'd keep trying but I have class in 15 minutes.

    Edit: Error console tells me "Unexpected token Illegal" on line 22.
    Last edited by Reaga; 04-18-2013 at 09:18 PM. Reason: Missed detail

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Thanked 665 Times in 660 Posts
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" type="text/javascript"></script>
    why are you declaring a css file as javascript?


    $('#map_canvas').gmap('addShape', 'Polygon', {'strokeColor: "orange", strokeWeight: 1, fillColor:"red", fillOpacity: 0.3, path: buildings[x]});
    this string is unterminated (you have to make sure that every double quote or apostrophe is matched - uneven numbers will bring you grief)

  3. Users who have thanked xelawho for this post:

    Reaga (04-19-2013)

  4. #3
    New Coder
    Join Date
    Jan 2013
    Thanked 0 Times in 0 Posts
    Thank you, I simply missed a }); to close the overall function, the comp I was on had notepad 1 instead of 2, so finding this error was a lot harder over there. The polygons function, and I can proceed. Topic Over


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts