Skip navigation
ArtichokeDesigner
Currently Being Moderated

Centering my map point

Sep 20, 2012 1:50 PM

Tags: #maps #widget #location #bubble #googlemaps

I'm developing an iOS app using Dreamweaver 6 using the maps widget. So I've used customized the code in maps widget and dragged the code back to dreamweaver and it looks great it also looks consistently great across all browsers. BUT when I test my Dreamweaver html file in the iOS simulator, the pin location isn't centered. I have my code pasted below and would love some advice.

 

 

Screen Shot 2012-09-20 at 3.53.36 PM.pngScreen Shot 2012-09-20 at 3.53.50 PM.png

 

 

 

<div data-role="page" id="map">

<div data-role="header">

    <h1>Map</h1>

  <div id="mapCanvas" style="width:320px; height:460px; min-width:320px; min-height:460px"></div>

    <script type="text/javascript">

// BeginOAWidget_Instance_2187524: #mapCanvas

 

 

            // initialize the google Maps

 

     function initializeGoogleMap() {

                    // set latitude and longitude to center the map around

                    var latlng = new google.maps.LatLng(43.22449,

                                                                                                              -87.98523);

 

                    // set up the default options

                    var myOptions = {

                      zoom: 13,

                      center: latlng,

                      navigationControl: true,

                      navigationControlOptions:

                                {style: google.maps.NavigationControlStyle.DEFAULT,

                               position: google.maps.ControlPosition.TOP },

                      mapTypeControl: true,

                      mapTypeControlOptions:

                                {style: google.maps.MapTypeControlStyle.DEFAULT,

                               position: google.maps.ControlPosition.TOP_RIGHT },

 

 

                      scaleControl: true,

                       scaleControlOptions: {

                            position: google.maps.ControlPosition.TOP

                },

                      mapTypeId: google.maps.MapTypeId.ROADMAP,

                      draggable: true,

                      disableDoubleClickZoom: false,

                      keyboardShortcuts: true

                    };

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

                    if (false) {

                              var trafficLayer = new google.maps.TrafficLayer();

                              trafficLayer.setMap(map);

                    }

                    if (false) {

                              var bikeLayer = new google.maps.BicyclingLayer();

                              bikeLayer.setMap(map);

                    }

                    if (true) {

                              addMarker(map,43.22,-87.98523,"Community Park");

                    }

            }

 

 

            window.onload = initializeGoogleMap();

 

 

           // Add a marker to the map at specified latitude and longitude with tooltip

           function addMarker(map,lat,long,titleText) {

                      var markerLatlng = new google.maps.LatLng(lat,long);

                     var marker = new google.maps.Marker({

                          position: markerLatlng,

                          map: map,

                          title:"Community Park",

                              icon: ""});  

           }

 

 

 

// EndOAWidget_Instance_2187524

    </script>

</div>

 
Replies
  • Sudarshan Thiagarajan
    3,731 posts
    Oct 15, 2010
    Currently Being Moderated
    Sep 22, 2012 6:32 AM   in reply to ArtichokeDesigner

    I see a redundant line break in your code for the variable definition of latlng.

     

    Can you try removing that to see if that fixes the issue?

     

    var latlng = new google.maps.LatLng(43.22449,

                                                                                                                   -87.98523);

    Make it

     

    var latlng = new google.maps.LatLng(43.22449, -87.98523);

    I'm not sure if this is going to make a difference. But you cannot break your variable into two different lines unless you have a text content displayed there with a backslash break, not a line break in code.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,731 posts
    Oct 15, 2010
    Currently Being Moderated
    Sep 22, 2012 10:25 PM   in reply to ArtichokeDesigner

    Well, what version if iOS Simulator are you running? Are you using a standalone version of the simulator or pre-packaged with X-Code?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,731 posts
    Oct 15, 2010
    Currently Being Moderated
    Sep 22, 2012 10:25 PM   in reply to ArtichokeDesigner

    Also, can you upload your webpage and test it out on an actual iPhone?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,731 posts
    Oct 15, 2010
    Currently Being Moderated
    Oct 2, 2012 12:02 AM   in reply to ArtichokeDesigner

    As far as what I've read because Apple has pulled the plug on Google Maps in iOS6, apps relying upon Google Maps API wont work the way they're supposed to.

     

    However, here's a git that you could try in your scenario: https://github.com/mladjan/GoogleMapsOverlayiOS

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,731 posts
    Oct 15, 2010
    Currently Being Moderated
    Oct 2, 2012 10:33 AM   in reply to ArtichokeDesigner

     

    But, as designers/ developers, in more ways than one we're forced to work our way around things 'as is' without much room for choice!

     

    I'll see if I can spend some time later tomorrow to send you a few workarounds for this scenario.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,731 posts
    Oct 15, 2010
    Currently Being Moderated
    Oct 3, 2012 1:52 AM   in reply to ArtichokeDesigner

    Well, let's wait an expert on the topic to respond to this thread here.

     

    In the meantime, I'd recommend that you create a post here to see if they have an answer for you too!

     

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points