Map with Multiple Markers based on latitude and longitude

**Ulala** · 2012-02-29, 06:50

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.


<!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>

**symbianyucca** · 2012-02-29, 06:58

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

**Ulala** · 2012-02-29, 07:47

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');
?>

**symbianyucca** · 2012-02-29, 07:50

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.

**le_gebr** · 2012-05-24, 13:33

@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

**le_gebr** · 2012-05-24, 13:54

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.

**le_gebr** · 2012-05-29, 10:18

@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>

**le_gebr** · 2012-05-30, 12:47

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>

Discussion Board

Thread: Map with Multiple Markers based on latitude and longitude

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

Get Latitude and Longitude values using network based positioning

set latitude and Longitude

Set Latitude and Set Longitude

Getting Latitude and Longitude

getting latitude and longitude

Posting Permissions