Add Title on Marker from XML file - Google Maps Api Javascript V3

[erkin aksoy]

Google Maps Api Javascript V3

Web page url : http://www.kurtulamayanlar.org

Can someone tell me how i can add a title on markers loaded from a Xml file.

This is the code;

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

<script type="text/javascript" src="downloadxml.js"></script>

<script type="text/javascript">

var infoWindow = new google.maps.InfoWindow();

function createMarker(point,info,map) {

var myMarkerOpts = {

position: point,

map: map,

icon: "ikon.png",

shadow: "ikon_shadow.png",

};

 

var marker = new google.maps.Marker(myMarkerOpts);

 

google.maps.event.addListener(marker, 'click', function() {

infoWindow.close();

infoWindow.setContent(info);

infoWindow.open(map,marker); 

});

}

function initialize() {

var latlng = new google.maps.LatLng(30.145127, 3.515625);

 

var mapOpts = {

zoom: 2,

center: latlng,

mapTypeId: google.maps.MapTypeId.TERRAIN,

mapTypeControl: false,

};

 

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

 

downloadUrl("vakalar.xml", function(data) {

var xmlDoc = xmlParse(data);

var records = xmlDoc.getElementsByTagName("marker");

 

for (var i = 0; i < records.length; i++) {

var rec = records[i];

  var title = rec.getAttribute("title"); <!-- this is my title code but not works.-->

var vaka = rec.getAttribute("vaka");

var lat = parseFloat(rec.getAttribute("lat"));

var lng = parseFloat(rec.getAttribute("lon"));

 

var marker = new google.maps.LatLng(lat,lng);

 

var html_text = vaka;

createMarker(marker,html_text,map);

}

});

}

</script>

This is vakalar.xml code;

<shapes>

<marker lat="37.775786" lon="29.085789" title="some title1" vaka="some data1"/>

<marker lat="38.383012" lon="27.179468" title="some title2" vaka="soma data2"/>

</shapes>

Thank you for your helps...

[geoco...@gmail.com]

On Sep 4, 1:06 pm, erkin aksoy <erkin.ak...@gmail.com> wrote:
> Google Maps Api Javascript V3
>
> Web page url :http://www.kurtulamayanlar.org
>
> Can someone tell me how i can add a title on markers loaded from a Xml file.

See the documentation:
http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerOptions

pass the desired title into your createMarker function, use it to set
the title property of the marker.

-- Larry

[erkin aksoy]

Hi Larry,

I am write into createMarker function. But still does not works.

downloadUrl("vakalar.xml", function(data) {
var xmlDoc = xmlParse(data);
var records = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < records.length; i++) {
var rec = records[i];

var title = rec.getAttribute("title"); <!-- this is my title code but
not works.-->
var vaka = rec.getAttribute("vaka");
var lat = parseFloat(rec.getAttribute("lat"));
var lng = parseFloat(rec.getAttribute("lon"));
var marker = new google.maps.LatLng(lat,lng);

var html_text = vaka;

createMarker(marker,title,html_text,map);
}

Thanks

Erkin

[geoco...@gmail.com]

On Sep 6, 3:47 pm, erkin aksoy <erkin.ak...@gmail.com> wrote:
> Hi Larry,
>
> I am write into createMarker function.  But still does not works.

Where is the link to the map where you did that and it didn't work?

The code below is not complete. Did you modify the createMarker
function appropriately?

-- Larry

[erkin aksoy]

Hi,

Sometimes I change the code for the site is under construction. The
problem with the question still remains. I want to activate Marker
Title Tooltip function by title data from xml file.

I revision the code similar. It's code is works but this time don't
opened infoWindow.

downloadUrl("vakalar.xml", function(data) {
var xmlDoc = xmlParse(data);
var records = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < records.length; i++) {
var rec = records[i];

var title = rec.getAttribute("title"); <!-- read title data from xml --

>
var vaka = rec.getAttribute("vaka");
var lat = parseFloat(rec.getAttribute("lat"));
var lng = parseFloat(rec.getAttribute("lon"));

var myLatLng = new google.maps.LatLng(lat,lng);

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: title,

});

var html_text = vaka;
createMarker(marker,title,html_text,map);
}

Thank you all...

[erkin aksoy]

Web site url: http://www.kurtulamayanlar.org

[Ralph]

Make sure that the "title" is included in this line here:

function createMarker(point,info,map) {

Ralph



On Sep 7, 10:39 pm, erkin aksoy <erkin.ak...@gmail.com> wrote:
> Web site url:http://www.kurtulamayanlar.org

[erkin aksoy]

Hi, thank you for your answers,

Iam revision the source code previous answers. Please check the code below or online www.kurtulamayanlar.org ( ! The World of Child Abuse News Archive)

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

<script type="text/javascript" src="downloadxml.js"></script>

<script type="text/javascript">

      function initialize() {

var latlng = new google.maps.LatLng(30.145127, 3.515625);

 

var mapOpts = {

zoom: 2,

center: latlng,

mapTypeId: google.maps.MapTypeId.TERRAIN,

mapTypeControl: false,

};

 

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

mapOpts);

 

downloadUrl("vakalar.xml", function(data) {

var xmlDoc = xmlParse(data);

var records = xmlDoc.getElementsByTagName("marker");

 

for (var i = 0; i < records.length; i++) {

var rec = records[i];

 

var title = rec.getAttribute("etiket");

var baslik = rec.getAttribute("baslik");

var tarih = rec.getAttribute("tarih");

var detay = rec.getAttribute("detay");

var adres = rec.getAttribute("adres");

var lat = parseFloat(rec.getAttribute("lat"));

var lng = parseFloat(rec.getAttribute("lon"));

 

var marker = new google.maps.LatLng(lat,lng);

 

var html_text = '<div class="vakakutu"><div class="vakabaslik">' + baslik + '</div><div class="vakatarih">' + tarih + '</div><div class="vakaozet"><img src="haberler/' + adres + '/foto.jpg" alt="' + baslik + '" />' + detay + '</div><div class="vakalink"><a href="haberler/' + adres + '/haber.html" target="haber">detaylar &gt;</a></div></div>';

createMarker(marker,html_text,map);

}

});

var infoWindow = new google.maps.InfoWindow();

function createMarker(point,info,map) {

var title = 'etiket';

var iconURL = 'ikon.png';

var iconSize = new google.maps.Size(17,34);

var iconOrigin = new google.maps.Point(0,0);

var iconAnchor = new google.maps.Point(9,34);

var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);

 

    var shadowURL = 'ikon_golge.png';

var shadowSize = new google.maps.Size(25, 21);

var shadowOrigin = new google.maps.Point(0, 0);

var shadowAnchor = new google.maps.Point(3, 21);

 

  var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor);

var myMarkerOpts = {

position: point,

map: map,

icon: myIcon,

shadow: myShadow,

title: title,

};

 

var marker = new google.maps.Marker(myMarkerOpts);

 

google.maps.event.addListener(marker, 'click', function() {

infoWindow.close();

infoWindow.setContent(info);

infoWindow.open(map,marker); 

});

return marker;

}

}

</script>

[Rossko]

> Iam revision the source code previous answers. Please check the code below

What are we checking for? You don't seem to have followed the advice
so far.

> or onlinewww.kurtulamayanlar.org

I don't see a map there, I think it is a sizing issue (no height)


...
> createMarker(marker,html_text,map);}

You are not passing on the 'title' value you extracted from your XML
to your createMarker() function

...
>  function createMarker(point,info,map) {

Your createMarker() function is not yet expecting to passed a value to
use for the title

>  var title = 'etiket';

When you do pass the title, you can get rid of this line of course

[erkin aksoy]

Hi,

Thank you for all. Problem is fixed now. 

Erkin AKSOY

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

<script type="text/javascript" src="downloadxml.js"></script>

<script type="text/javascript">

      function initialize() {

var latlng = new google.maps.LatLng(30.145127, 3.515625);

 

var mapOpts = {

zoom: 2,

center: latlng,

mapTypeId: google.maps.MapTypeId.TERRAIN,

mapTypeControl: false,

};

 

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

mapOpts);

 

downloadUrl("vakalar.xml", function(data) {

var xmlDoc = xmlParse(data);

var records = xmlDoc.getElementsByTagName("marker");

 

for (var i = 0; i < records.length; i++) {

var rec = records[i];

 

var title = rec.getAttribute("baslik");

var baslik = rec.getAttribute("baslik");

var tarih = rec.getAttribute("tarih");

var detay = rec.getAttribute("ozet");

var adres = rec.getAttribute("adres");

var lat = parseFloat(rec.getAttribute("lat"));

var lng = parseFloat(rec.getAttribute("lon"));

 

var point = new google.maps.LatLng(lat,lng);

 

var info = '<div class="vakakutu"><div class="vakabaslik">' + baslik + '</div><div class="vakatarih">' + tarih + '</div><div class="vakaozet"><img src="haberler/' + adres + '/foto.jpg" alt="' + baslik + '" />' + detay + '</div><div class="vakalink"><a href="haberler/' + adres + '/haber.html" target="haber">detaylar &gt;</a></div></div>';

createMarker(point,title,info,map);

}

});

var infoWindow = new google.maps.InfoWindow();

function createMarker(point,title,info,map) {

[Rossko]

> Thank you for all. Problem is fixed now.

I would suggest some cross-browser checking though; I still don't see
any map at
http://www.kurtulamayanlar.org/

var mapOpts = {
...
mapTypeControl: false,
};
the unwanted comma will cause a break in some browsers, as they will
look for the next property

[erkin aksoy]

Thank You Rossko,

I removed the comma, I hope map working correctly. I don't control
here because at my computer, everything seems OK.

I will try to correct the the following Firefox errors sent by the
user "JFrancis" now.


Firefox Errors;

"The map appears, however, Firefox's Error Console is catching this
string of errors:

Error: uncaught exception: [Exception... "An invalid or illegal
string
was specified" code: "12" nsresult: "0x8053000c
(NS_ERROR_DOM_SYNTAX_ERR)" location: "http://maps.gstatic.com/intl/
en_us/mapfiles/api-3/6/4/main.js Line: 91"]

Error: uncaught exception: [Exception... "An invalid or illegal
string
was specified" code: "12" nsresult: "0x8053000c
(NS_ERROR_DOM_SYNTAX_ERR)" location: "http://maps.gstatic.com/intl/
en_us/mapfiles/api-3/6/4/main.js Line: 92"]

Error: uncaught exception: [Exception... "An invalid or illegal
string
was specified" code: "12" nsresult: "0x8053000c
(NS_ERROR_DOM_SYNTAX_ERR)" location: "http://maps.gstatic.com/intl/
en_us/mapfiles/api-3/6/4/main.js Line: 92"]

I would add the page appears with both the map and the content shoved
to the right and out of the browser frame; indicating a possible
positioning problem with one or more DIVs. "

Thank you all.

Erkin