[Brandon]

edited by support-wayne (Oct 10, 2012)
Update
As of MobiOne 2.1 a map widget (google map implementation) is now available in the Design Center. We strongly encourage you to use this widget in your screens in place of custom map code.

Map Developer Guide (preliminary)

Also the Geolocation app on the Test Center homescreen has been updated. You can access the src to that project here
See attachment geolocation.png

—————————————————————-
original post starts here
For all those waiting for the map widget who can’t wait and need something now I have created a basic map tutorial. I put this together after searching on this forum and finding code and viewing Google’s map code.

Here we go.

1. Create a new screen, I called mine ‘map’
2. Add a panel to the screen and change the id of the panel to map.

At this point you will have your screen with a blank panel on it. Save the screen.

Unfortunately, for those that don’t like scripting that is all the design work you need to do. the rest is done in the code. But, I have created a simple cut and paste version where you only have to change a few small things.

Ok, so now we are going to run our map in the test center. It will still be blank.
Click on the Tools panel on Tools, then View Source.
The first thing we need to find is the custom javascript file. If this is your only screen it will be map_custom.js

Copy and paste the following code at the end of the script, be sure not to paste it into another function.
The code is commented so you can change the latitude and longitude to your needs, you can also change the Marker title to whatever you want.

function DisplayMap() {
//The lat and long you want to show on the map//
   var latlng = new google.maps.LatLng(33.5426752, -86.8099416);

//Map Options//
   var myOptions = {

    //Zoom - how close to the desitination//
          zoom: 15,

    //Your center point//
          center: latlng,

    //Show default controls or not, best not to on phones as it takes up a lot of room//
         disableDefaultUI: true,

    //Street view controls//
          streetViewControl: false,

    //Map Type//
          mapTypeId: google.maps.MapTypeId.ROADMAP

        };

//COPYRIGHT WHITE SPACE FIX, needs to point the map element, the same as the one below//
document.getElementById('m1-map-map').style.lineHeight = '1';

//Create a new map and assign it to our map panel. You will notice the screen name starts with m1-name, you must use the m1-//
var map = new google.maps.Map(document.getElementById("m1-map-map"),
          myOptions);

//Create a point for our map marker//
var point = latlng;//new GLatLng(33.5426752, -86.8099416);

//Create a new marker with a title//
var marker = new google.maps.Marker({
        position: latlng, 
        map: map,
        title:"St Luke AME!"
    });   

//Create the marker on the map//
marker.setMap(map);
   
}​

Now save the javascript file. It will reload the screen, but you will see it is still blank.
There are two more steps.
The first is to call the function for the map display.

Back in the javascript file you will see a function like this:

/**
 * Called when document is loaded.
 */
phoneui.documentReadyHandler = function() {
}

Here you can add the DisplayMap() call so it should look like this:

/**
 * Called when document is loaded.
 */
phoneui.documentReadyHandler = function() {
DisplayMap();
}

Now, the last step is to go back to your source code and edit the html file. You will need to add this like inside the head tags:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Once that is in the head tags you can refresh your test center and you should see the map load.

This is been fixed in the above script.
You may notice the white panel on the side, I have not as yet found a way to get rid of it.

If you have any questions feel free to post them and I will try to answer them.

EDIT: I have just tried this using the Publish to Web Application (using the new version 2.0 release) and for some reason it does not work on my iPhone, though it works in the desktop Safari. It works fine with the files exported to html and uploaded to my website (http://cincyplanet.com/stlukemobile/ this test site is using the code). Once I find out why I will post a fix or the info I find out.

Project File – Includes map screen, make sure when you run it you do NOT check the modify warning box when it comes up, this will overwrite the google map api call in the head section, if you do you will need to reinsert it.
http://cincyplanet.com/mobione/map.zip

Attachments:

You must be logged in to view attached files.

[Douger]

Hi Cincy,

Thanks for the tutorial on the map, I now have it functioning in mine. One step you may want to highlight is the map name must match your screen in the function (you have it in the comments but I didn’t catch it right away).

You were asking about the white space, I have a solve. My map was half map and half white space since my panel wasn’t a full screen. The white space is the copyright notice. There is a quick solution to getting rid of it. Open up the css for the screen, find the map you added (search for map) and then just change the line-height parameter to 1px and voila the white space is gone and now you will just see the full map on my contact screen.

#m1-contact-map{
-webkit-border-radius: 5px;
border-color: rgb(170,170,170);
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 164px;
left: 18px;
line-height: 1px;
margin-right: 36px;
top: -340px;
width: auto;
overflow: hidden;
}

Also one more note make sure you don’t regenerate the css or html file or you will lose your changes.

I have uploaded and everything looks good, also looks good in the test center.

[Brandon]

Douger,

Thanks. Yeah, thats why i pointed out the map name i used. Good find on the css fix. MobiOne is supposed to get a custom css feature, which would mean this could be done in program and not after the fact.

[fbod383]

Good find on that douger, I was looking through the CSS last night trying to find it!

[Brandon]

Alright, one more thanks to Douger, for the CSS fix, and here is how to do it without having to find and edit the info in the css file, I also fixed the code in the original script above:

I call everything with a button, the map is on a new screen. Here is the code for the javascript the button calls:

//Set the style of the linHeight to 1, to get rid of the control - thanks Douger
//NOT NEEDED NOW //
document.getElementById('m1-map-map').style.lineHeight = '1';
//Open the new page that has the map on it
phoneui.gotoPage("m1-map");
//Call the DisplayMap(); script that will show the map and marker
DisplayMap();

It should now load the map page, and the copyright notice will be small and in the corner like it should be…

[fbod383]

when I change the map coordinates, it just shows a gray screen. thoughts?

[fbod383]

forgot the “-” in the longtitude.. thank for for 8th grade geography… lol

[fbod383]

forgot the “-” in the longtitude.. thank for for 8th grade geography… lol

[fbod383]

doesnt work at all if its linked from another screen via a button

[Brandon]

@fbod383
It should, thats how I am using it in my project, with the exact code above. If you are using a button, make sure the DisplayMap function is being called. The code I am using in my button in in my last post, though I did take out the lineHeight reference since it is now in the display map call.

[fbod383]

On click I have it set to run javascript, and this is the script I put in
://Open the new page that has the map on it
phoneui.gotoPage(“m1-map”);
//Call the DisplayMap(); script that will show the map and marker
DisplayMap();
but nothing happens, And I have used all of your exact naming and copied and pasted. only thing I have changed is the map coordinates and removed the marker.

[Brandon]

And is the screen the map is on saved as map.mobi?

try putting this right below the DisplayMap call to make sure its calling the function and not messing up somewhere else:

alert('working');

If you get a message box saying ‘working’ the function is being called, but something else is preventing it from working correctly.

I know the test center also has a javascript debugger, but I havent used it much so Im not sure how/if it could help. Maybe support could chime in on the workings of the debugger.

[Douger]

Thanks for the javascript add Cincy, that will save me from editing 2 files.

If we could post attachments in the forum I would share a screen print, still working on the app and its not deployed yet, hope to have something by end of this week to share.

[fbod383]

I ran the debugger and it says it cannot find m1-map. Which is odd as I have just copied and pasted your script.

[Brandon]

m1-map is actually the name of the form that holds the control.
So,if your screen is index.mobi you would need to change it to m1-index followed by the name of the map control (which I used map, so mine was m1-map-map, using index it would be m1-index-map).

I hope this helps.

[Author]

Posts