Learning iPhone developing - need help with google map markers

The_B_Man · 04-02-2011 4:32pm #1

Hi,

So I'm making an app for a college project with google maps and I'm able to load the app with the map centered on my position. It was handy enough once I went through the docs.

What I'm trying to do next is load up a load of markers, the locations of which I'll have to store somewhere, either in an SQLite database, a txt file, or probably just an array.

So, how can I translate my coordinates into markers on the map itself? Is it just through URL parameters or what? Is anyone familiar with google maps API that can share some insight?

I've looked on the docs and they just give a general overview for one marker!
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Markers

I've actually got HTML code that I could prob get to work. Can I have an HTML file in my project that the UIWebView can just load, instead of the URL, eg "NSString *url = @myfile.html; " or alternatively I could make a huge long NSString with the whole HTML code in it and somehow run that in the WebView?

Thanks.

fenderlvr · 04-02-2011 6:36pm

I used a DB to store the marker info. I created a PHP file that gets the marker info from the DB and returns an XML document. This is meant to be called from the page with the map in it as an AJAX call. Here's the code for that...

<?php
    require_once("global/global.php");

    $radius = $_POST["radius"];
    $lat = $_POST["lat"];
    $lon = $_POST["lon"];
echo $lat;
    if($lat == "" || $lon == "") {
        $radius = $_GET["radius"];
        $lat = $_GET["lat"];
        $lon = $_GET["lon"];
    }

    $dom = new DomDocument("1.0");
    $dom->formatOutput = true;
    $markers = $dom->createElement("markers");
    $markers = $dom->appendChild($markers);

    $sql = sprintf("SELECT comment, lat, lon, created_date, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lon ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM tag HAVING distance < '%s' ORDER BY distance LIMIT 0 , 20;",
        $db->real_escape_string($lat),
        $db->real_escape_string($lon),
        $db->real_escape_string($lat),
        $db->real_escape_string($radius));


    if($results = $db->query($sql))
    {
        while($row = $results->fetch_object())
	{
            $marker = $dom->createElement("marker");
            $marker = $markers->appendChild($marker);
 
            $elem = $dom->createElement("comment");
            $value = $dom->createTextNode($row->comment);
            $elem->appendChild($value);
            $marker->appendChild($elem);

            $elem = $dom->createElement("lat");
            $value = $dom->createTextNode($row->lat);
            $elem->appendChild($value);
            $marker->appendChild($elem);

            $elem = $dom->createElement("lon");
            $value = $dom->createTextNode($row->lon);
            $elem->appendChild($value);
            $marker->appendChild($elem);

            $elem = $dom->createElement("distance");
            $value = $dom->createTextNode($row->distance);
            $elem->appendChild($value);
            $marker->appendChild($elem);
        }
    }
    
    $xmlOutput = $dom->saveXML();

    header("Content-Type: text/plain");
    echo $xmlOutput;
?>

Then on my map page I'm using jQuery and the google maps API. In a nutshell I'm getting the device's current location using the HTML5 geolocation API. Then when it gets that it calls my PHP file above using jQuery AJAX call (this is the $.post section). Then when it gets that XML back from the PHP it does the addMarkers function which goes through each marker in my XML file and adds it to the map. To actually add each one to the map I created the function addMarker which just takes in the lat, lon, and in my case a comment and distance, and that function uses the Google maps API to add the marker to the map.

Here's the code. I think you'll be most interested in the addMarker function.

<?php require_once("global/global.php"); ?>
<!DOCTYPE HTML>

<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <title>GeoTag</title>
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { width: 100%; height: 90%;}
    </style>
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=true">
    </script>
    <script src="js/jquery-1.4.2.min.js"></script> 
    <script>
        var radius = <?php if($_POST["txtRadius"] != ""){ $radius = $_POST["txtRadius"]; } else {$radius = "10";} echo $radius ?>;
        var map;
        var infoWindow = new google.maps.InfoWindow();

        jQuery(window).ready(function(){  
            initiate_geolocation();  
        });
  
        function initiate_geolocation() {  
            navigator.geolocation.getCurrentPosition(handle_geolocation_query);  
        }  

        function addMarker(lat, lon, comment, distance) {
            var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lon));
            var marker = new google.maps.Marker({
                position: myLatlng, 
                map: map, 
                title: comment
            });
            
            var html='<b>Distance: '+distance+'</b><br />'+comment;

            // add a listener to open the tooltip when a user clicks on one of the markers
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
            });
        }
 
        function handle_geolocation_query(position){  
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;  
        
            var latlng = new google.maps.LatLng(lat,lon);
            var myOptions = {
              zoom: 10,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

            $.post("searchRadius.php",{   
                radius: radius,   
                lat: lat,   
                lon: lon   
                }, function(xml) {   
                    addMarkers(xml);   
                }
            );
        }

        function addMarkers(xml) {
            $("marker",xml).each(function(id) {
                marker = $("marker",xml).get(id);
                addMarker($("lat",marker).text(),$("lon",marker).text(),$("comment",marker).text(),$("distance",marker).text());
            });

            var circle = new google.maps.Circle({radius: parseFloat(radius) * 1600, center: map.getCenter()}); 
            map.fitBounds(circle.getBounds());
        }
    </script>
</head>

<body>
    <div id="map_canvas"></div>
    <form action="<?= $GLOBALS["pageName"] ?>" method="post">
        <input type="text" name="txtRadius" value="<?= $radius ?>" /><input type="submit" value="Refresh Map"> <a href="index.php">Post...</a>
    </form>
    
</body>

</html>

fenderlvr · 04-02-2011 6:48pm

I realize you're doing this on an iPhone so it'll be different. But I felt like my whole code would help you a lot more than me asking a bunch of questions and posting code snippets.

You can probably do all that stuff in native code on the iPhone. You basically just need that addMarker function, some way to store the markers, some way to get them, and then loop through them.

The_B_Man · 07-02-2011 10:42am

Ye cheers mate! Thats cool!
Hope the homebrew goes well too!

Learning iPhone developing - need help with google map markers

Comments