×

Discussion Board

Results 1 to 8 of 8
  1. #1
    Registered User
    Join Date
    Feb 2012
    Posts
    38

    Map with Multiple Markers based on latitude and longitude

    Hi,

    I have multiple latitudes and longitudes generated dynamically. Now, I need multiple markers for various latitude and longitudes. Also I required click event which is showing infobubble with the related message.

    The code below shows for only one Marker and when we click on marker showing infobubble with related message. (This is only for reference - i.e., I need same functionality for muliple markers). Please suggest how to proceed.

    <!-- This is the code for Nokia Map - Single Pin (Marker) with popup onclick message -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ovi Maps API Example</title>
    <script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="map" style="z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;"></div>

    <style type="text/css">
    .nm_bubble_content{
    color:black;
    background:white;
    border: 1px solid black;
    padding:0px;
    }
    </style>

    <script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    var alat = 52.530390;
    var along= 13.385190;
    var bubbleContainer = new nokia.maps.map.component.InfoBubbles();
    //bubbleContainer.options.defaultWidth = 50;
    var coords = new nokia.maps.geo.Coordinate(alat, along);
    var marker = new nokia.maps.map.StandardMarker(coords);
    var infoBubble;
    var restore_bubble = false;
    var bubbleText = "Test message here"

    map = new nokia.maps.map.Display(
    document.getElementById("map"),
    {
    'zoomLevel': 12,
    'center': [alat, along],
    components: [
    new nokia.maps.map.component.Behavior(),
    new nokia.maps.map.component.ZoomBar(),
    new nokia.maps.map.component.TypeSelector(),
    bubbleContainer
    ]
    });

    var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
    startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 32, 32, 10, 10);
    startMarker = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(52.530390, 13.385190), {
    icon: startIcon,
    anchor: new nokia.maps.util.Point(12, 12)

    });
    startMarker.addListener("click", function() {
    infoBubble = bubbleContainer.addBubble(bubbleText, coords);
    restore_bubble = true;
    });
    map.objects.add(startMarker);
    </script>
    </body>
    </html>

  2. #2
    Nokia Developer Expert
    Join Date
    Mar 2003
    Location
    Lempäälä/Finland
    Posts
    29,142

    Re: Map with Multiple Markers based on latitude and longitude

    basically you could simply make a for loop to loop the dynamic content you get and in it add separate markers into the map for each place in your data.

    The you just need to catch which marker is clicked, and open the infobubble with specific content for that marker. You could check the links for marker & infobubble examples from your yesterdays posts

  3. #3
    Registered User
    Join Date
    Feb 2012
    Posts
    38

    Re: Map with Multiple Markers based on latitude and longitude

    Hi,

    I tried, but it is getting issues. If this below values having in an array, show me the example code for my requirement.
    <?
    $alat = Array('38.385668','39.908105','41.03816','36.788164','39.916388','37.002343','39.86799','37.081958','37.004293');
    $along = Array('27.05791','32.860727','28.98478','34.6057','32.862725','35.331382','32.82192','27.456939','35.311241');
    ?>

  4. #4
    Nokia Developer Expert
    Join Date
    Mar 2003
    Location
    Lempäälä/Finland
    Posts
    29,142

    Re: Map with Multiple Markers based on latitude and longitude

    I would suggest that you do testings with FireFox and install the Firebug into it, and use the firebug for debugging. Also as the array handling is not really Maps API specific issue, you could always search examples in internet for the selected Javascript implementation you are using.

  5. #5
    Registered User
    Join Date
    May 2012
    Posts
    9

    Re: Map with Multiple Markers based on latitude and longitude

    @Ulala,

    Have you tried with something like this (not exact code):
    <?php
    //array below is array('lat' => 'long')
    $coordinates = array('0.1' => '0.2', '0.3' => '0.4', '0.5' => '0.6','0.7' => '0.8','0.9' => '1');
    $i=0;
    foreach($coordinates as $lat => $long){
    echo 'var alat'.$i.'='.$lat.';';
    echo 'var along'.$i.'='.$long.';';
    echo 'var bubbleContainer'.$i.'= new nokia.maps.map.component.InfoBubbles();';
    echo 'var coords'.$i.'= new nokia.maps.geo.Coordinate(alat'.$i.', along'.$i.');';
    echo 'var marker'.$i.'= new nokia.maps.map.StandardMarker(coords'.$i.');';
    echo 'infoBubble'.$i.';';
    echo 'bubbleText'.$i.' = "Test message here";';
    $i++;
    }

    ?>

    I haven't played with the map yet so it may need a couple of $i added to other js variables. Also let me know if you find a limit to the number of iteration - I would like to create a map with 500+ markers

  6. #6
    Registered User
    Join Date
    May 2012
    Posts
    9

    Re: Map with Multiple Markers based on latitude and longitude

    BTW - and as I said I haven't played with the map yet - why not look at the KML integration? I know that's how a lot of GMaps work when multiple markers are concerned.

  7. #7
    Registered User
    Join Date
    May 2012
    Posts
    9

    Re: Map with Multiple Markers based on latitude and longitude

    @Ulala, have you fixed your issues? I have had a play with the map api and the code below worked for me. Please note it creates a map with multiple markers of 4 different colours with info bubbles with unique text for each. There is also a geocode search box. All the data comes from a mysql database and I am using the latest map code:

    <form><p id="pcode"><label><input type="text" id="postcode" value="type postcode" /></label><button type="button" onclick="mapStartPostCode()">Go</button></p></form><p class="clear"></p>
    <div id="map"></div>
    <script type="text/javascript">
    /***
    Set authentication token and appid. These are required for the map to work. Obtained after registering on http://api.developer.nokia.com/
    ***/
    nokia.Settings.set( "appId", "use yours");
    nokia.Settings.set( "authenticationToken", "use yours");

    /***
    Create a map inside the map container DOM node
    ***/
    var infoBubbles = new nokia.maps.map.component.InfoBubbles();

    var map = new nokia.maps.map.Display(document.getElementById("map"),{zoomLevel:6, components: [infoBubbles, new nokia.maps.map.component.Behavior(),new nokia.maps.map.component.ZoomBar(),new nokia.maps.map.component.ScaleBar()]});
    map.setCenter(new nokia.maps.geo.Coordinate(54.55, -3.1));

    /***
    Postcode search and map redrawing
    ***/
    var onPostcodeComplete = function(data,requestStatus){
    if(requestStatus == "OK"){
    map.set("zoomLevel",13)
    map.setCenter(new nokia.maps.geo.Coordinate(data.location.position.latitude, data.location.position.longitude));
    } else if(requestStatus == "ERROR") {alert("Postcode search failed.");}
    };

    function mapStartPostCode(){
    var postcode = document.getElementById("postcode");
    nokia.places.search.manager.geoCode({searchTerm:postcode.value,onComplete:onPostcodeComplete});
    }


    /***
    Markers & Info bubbles
    ***/
    <?php
    //4 different group of data with 4 hex colours
    $group_array = array('a' => 'ff8737','b' => '439fcd','c' => '9ac41a','d' => 'b586ff');
    //start the map.objects.addAll that will add all the markers in the end
    $addAll = 'map.objects.addAll([';

    //loop through each group
    foreach($group_array as $key => $value){
    //retrieve group info
    if($query = @mysql_query("SELECT id,txt,lat,long FROM table WHERE group = '$key'")){
    while($result=mysql_fetch_array($query)){
    //get data from database
    $clean['id'] = htmlentities($result['id'], ENT_QUOTES);
    $clean['txt'] = htmlentities($result['txt'], ENT_QUOTES);
    $clean['lat'] = htmlentities($result['lat'], ENT_QUOTES);
    $clean['long'] = htmlentities($result['long'], ENT_QUOTES);

    //output javascript
    echo 'var sm'.$clean['id'].' = new nokia.maps.map.StandardMarker(['.$clean['lat'].','.$clean['long'].'],{brush:{color:"#'.$value.'"}});';
    echo 'text'.$clean['id'].' = "'.$clean['txt'].'";';
    echo 'sm'.$clean['id'].'.addListener("click", function(evt){infoBubbles.addBubble(text'.$clean['id'].', sm'.$clean['id'].'.coordinate);});';
    $addAll .= 'sm'.$clean['id'].', ';
    }
    }
    }
    //removes the last coma space from $addAll
    $addAll = substr($addAll, 0, -2);
    $addAll .= ']);';
    echo $addAll;
    ?>
    </script>
    Last edited by le_gebr; 2012-05-29 at 10:23.

  8. #8
    Registered User
    Join Date
    May 2012
    Posts
    9

    Re: Map with Multiple Markers based on latitude and longitude

    I changed the form code for the search to work on any types of "submit" (not just on button press): <form onsubmit="mapStartPostCode();return false"><p id="pcode"><label><input type="text" id="postcode" value="type postcode" /></label><button type="submit">Go</button></p></form>

Similar Threads

  1. Get Latitude and Longitude values using network based positioning
    By DileepKumar in forum Mobile Java General
    Replies: 8
    Last Post: 2011-11-22, 20:14
  2. set latitude and Longitude
    By sridharbandi in forum Symbian C++
    Replies: 4
    Last Post: 2010-12-27, 06:35
  3. Set Latitude and Set Longitude
    By sridharbandi in forum Mobile Java General
    Replies: 6
    Last Post: 2010-12-15, 13:21
  4. Getting Latitude and Longitude
    By PavanP in forum Geolocation and Navigation
    Replies: 1
    Last Post: 2009-10-13, 13:37
  5. getting latitude and longitude
    By arun09 in forum Symbian C++
    Replies: 1
    Last Post: 2009-06-13, 13:39

Posting Permissions

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