DevProTalk - google map marker

DevProTalk (http://www.devprotalk.com/index.php)

- Web aplikacije, web servisi i software (http://www.devprotalk.com/forumdisplay.php?f=30)

- - google map marker (http://www.devprotalk.com/showthread.php?t=10118)

Desni klik u browseru pa view source, pa postavi taj kod ovde na forumu.
Kada isprobam kod sebe ovo radi, prikaže se mapa, takođe i prvi kod sam isprobao i prikazivao je mapu, naravno uz ispravljanje problema koji sam naveo.
Pokušaj da staviš pun php open tag, dakle umesto "<?" stavi "<?php", možda php nije podešen da radi sa kratkom verzijom.

Kao prvo kada postujes kod na forumu potrudi se da kod

HTML kôd:

<html>

  <head><title> bilo da se radi o HTML</title></head>

  <body></body>

</html>

Kôd:

<?php echo ' ili o mozda PHP kodu'; ?>

kod stavis u odgovarajuce tagove

Ovde sigurno ima ljudi koji bi ti pomogli ali nemaju vremena za ronjenje po tvom ili bilo cijem kodu, posebno ako je kod duzi od 20-ak linija i nije formatiran.

Sto se tice rada sa mapom, na netu postoji dovoljan broj primera, za postavku osnovne mape, takodje imas i primere za postavljanje markera sa sve svojim slicicama. Posto stalno navodis da ti se nevidi mapa, onda pocni od pocetka, sa jednostavnim stranama, cist html i javascript, i ucitavaj mapu, pravi markere, probaj, istrazuj. Nadam se da koristis Firefox i Firebug, jer ce ti biti od koristi. Ako nesto neradi ti onda debug-uj, pogledaj greske u Firebug-u, ili jednostavno ukljucivanjem/iskljucivanjem delova koda/funkcija pronadji gde je greska.

Kada savladas dodavanje markera i rad sa mapom ubaci malo dinamike, uvlacenje markera preko XML ili iz baze (da li ces direktno ubacivati, kao sto sad pokusavas da radis ili preko mozda ajax-a to je stvar tvog izbora, potrebe itd). Sto se tice google mapa i uvlacenja preko XML, ne mogu da se setim da li to postoji, za VirtualEarth/Bing mape postoji sigurno.

Zasto ti mapa ne radi?
1. Treba ti KEY ako je mapa v2
2. Greska u javascript-u (skoro uvek)

Zasto se ne prikazuju markeri?
1. Nisi ih dodao a mislis da si ih dodao
2. Dodao si ih ali su van tekuceg prikaza (Bounds)
3. Zamenio si Lat i Long (vazi i pod dva)

Koristim Google Crome i ako na googleovom browser ne rade google mape onda bi to bilo stavrno glupo...
Evo koda:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Map API V3 with markers</title>
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 350px; height: 300px; border: 0px; padding: 0px; }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
addMarker(47.608940, -122.340141,'<b>Pan Africa Market</b><br/>');
addMarker(47.613590, -122.344391,'<b>Buddha Thai & Bar</b><br/>');
addMarker(47.624561, -122.356445,'<b>The Melting Pot</b><br/>');
addMarker(47.606365, -122.337654,'<b>Ipanema Grill</b><br/>');
addMarker(47.612823, -122.345673,'<b>Sake House</b><br/>');
addMarker(47.605961, -122.340363,'<b>Crab Pot</b><br/>');
addMarker(47.613976, -122.345467,'<b>Mama's Mexican Kitchen</b><br/>');
addMarker(47.617214, -122.326584,'<b>Wingdome</b><br/>');
addMarker(47.610126, -122.342834,'<b>Piroshky Piroshky</b><br/>');
center = bounds.getCenter();
map.fitBounds(bounds);

}
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</html>

Nije ti body zatvoren...

Problem je u apostrofu u redu

Kôd:

addMarker(47.613976, -122.345467,'<b>Mama's Mexican Kitchen</b><br/>');

Hvala svima puno na pomoci ... razbio sam glavu 3 dana. Hvala jos jednom!

Da li je moguce umesto infoWindow-a na google mapama postaviti npr. obican div layer ili neki jquery umesto njega... tj. kada se klikne na marker da se umesto infoWindowa pojavi layer sa podacima ili sl.

Zelim da napravim markere po kategorijama i za primer sam uzeo restorane i barove medjutim checkboxovi nerade kako treba ... trazio sam gresku ceo dan ali neznam sta je u pitanju?

var customIcons = {

restaurant: {

icon: 'http://kuponik.adriamart.com/icon3.png',

shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'

},

bar: {

icon: 'http://kuponik.adriamart.com/icon3.png',

shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'

}

};
var markerGroups = { "restaurant": [], "bar": []};

function load() {
var dialog = $('<div>').dialog({autoOpen:false});
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(44.83, 20.41),
zoom: 12,
mapTypeId: 'roadmap'
});

var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker") ;
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
markerGroups[type].push(marker);
var totolink = markers[i].getAttribute("totolink");

var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = '<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td colspan="2" valign="top"><div align="center">' + name + '</div></td></tr><tr><td width="50%" valign="top"><img src="' + address + '" alt="" width="150" border="0" /><br></td><td width="50%" align="center" valign="middle"><a href="' + totolink + '"><img src="buy_btn.png" width="70" height="30" border="0" /></a></td></tr><tr><td colspan="2" valign="top" bgcolor="#999999"><div align="center">BETA!</div></td></tr></table>';

var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});

google.maps.event.addListener(marker, 'click', dial(html));
}
});
}

function dial(html){
return function(){
dialog = $('<div>').dialog({autoOpen:false});
dialog.html(html).dialog('open');
}
}
function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (marker.isHidden()) {
marker.show();
} else {
marker.hide();
}
}
}

function downloadUrl(url, callback) {

var request = window.ActiveXObject ?

new ActiveXObject('Microsoft.XMLHTTP') :

new XMLHttpRequest;

request.onreadystatechange = function() {

if (request.readyState == 4) {

request.onreadystatechange = doNothing;

callback(request, request.status);

}

};

request.open('GET', url, true);

request.send(null);

}

function doNothing() {}

//]]>

</script>

<style type="text/css">

</style></head>

<body onLoad="load()">

<div id="map" style="width: 100%; height: 100%"></div>
<div id="Layer4">
<div id="sidebar" style="float:left; width: 120px; height: 250px; border: 1px solid black">
<input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('restaurant')" CHECKED />
Restaurants
<br/>
<input type="checkbox" id="barCheckbox" onclick="toggleGroup('bar')" CHECKED/>
Bars
</div></div>

takodje pogledajte http://kuponik.adriamart.com

Prvo, koliko vidim u xml fajlu na sajtu nemaš definisane markere sa tipom restaurant.
Zatim u niz markerGroups dodaješ nove elemente (objekat marker), a pritom taj objekat nije kreiran, dakle red:

Kôd:

markerGroups[type].push(marker);

stavi posle reda:

Kôd:

google.maps.event.addListener(marker, 'click', dial(html));

Zatim koliko vidim objekat Marker nema metode show(), hide() i isHidden(), ali u dokumentaciji se može videti da poseduje metode getVisible() i setVisible(), pa umesto koda:

Kôd:

if (marker.isHidden()) {

marker.show();

} else {

marker.hide();

}

stavi:

Kôd:

if(marker.getVisible()) {

  marker.setVisible(false);

} else {

  marker.setVisible(true);

}

Probao sam na tvoj i na razne druge nacine ali klikomna checkbox ne desava se apsolutno nista, a restoran nije definisan u xml-u vec samo bar... da vidim kako funcionise i da testiram ali opet kazem mareri koji su oznaceni kao bar trebalo bi da se iskljuce/ukljuce klikom na checkbox...