Hali!
Örülök és köszönöm, hogy benéztél, remélem fogsz is tudni segíteni majd...
Arról lenne szó, hogy a most készülő oldalba szeretném beilleszteni a google maps-et, de nem akárhogyan. (Egyébként már az oldalon van több féle is belőlük, eddig még nem akadnak össze, de ez most nem téma, először működjön amit szeretnék. Hiába olvastam végig ez ügyben a netet, nem találtam rá orvosságot, kérem aki ért hozzá segítsen!!!)
Na arról lenne szó, hogy mindenképpen V3, tartalmazzon LocalSearch funkciót, ami input bevitelű, nem pedig magán a térképen levő google hülyeség. Valamint markereket tudjak elhelyezni rajta MYSQL adatbázisból PHP-vel kiíratva.
Nekem mind a 2 külön-külön megy, de hiába v3 mind2, egész egyszerűen nem tudtam összehozni őket, h ne akadjon össze. Ha meg nem akadt össze, akkor meg csak az egyik ment. Segítséget is tudok adni, mind a kettőre, csak valahogy össze kéne rakni...
Keresős:
HTML kód:
<!--
Copyright 2008 Google Inc.
Licensed under the Apache License, Version 2.0:
[url]http://www.apache.org/licenses/LICENSE-2.0[/url]
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Local Search API + Maps API v3 demo</title>
<link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css"/>
<link href="./places.css" rel="stylesheet" type="text/css"/>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ82LsCgTSsdpNEnB***toeJv4cdBSUkiLH6ntmAr_5O4EfjDwOa0oZBQ" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// Our global state
var gLocalSearch;
var gMap;
var gInfoWindow;
var gSelectedResults = [];
var gCurrentResults = [];
var gSearchForm;
// Create our "tiny" marker icon
var gYellowIcon = new google.maps.MarkerImage(
"design/semmi",
new google.maps.Size(32, 42),
new google.maps.Point(0, 0),
new google.maps.Point(6, 20));
var gRedIcon = new google.maps.MarkerImage(
"design/semmi",
new google.maps.Size(32, 42),
new google.maps.Point(0, 0),
new google.maps.Point(6, 20));
var gSmallShadow = new google.maps.MarkerImage(
"design/semmi",
new google.maps.Size(22, 20),
new google.maps.Point(0, 0),
new google.maps.Point(6, 20));
// Set up the map and the local searcher.
function OnLoad() {
// Initialize the map with default UI.
gMap = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.498406,19.040758),
zoom: 12,
mapTypeId: 'roadmap',
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
});
// Create one InfoWindow to open when a marker is clicked.
gInfoWindow = new google.maps.InfoWindow;
google.maps.event.addListener(gInfoWindow, 'closeclick', function() {
unselectMarkers();
});
// Initialize the local searcher
gLocalSearch = new GlocalSearch();
gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch);
}
function unselectMarkers() {
for (var i = 0; i < gCurrentResults.length; i++) {
gCurrentResults[i].unselect();
}
}
function doSearch() {
var query = document.getElementById("queryInput").value;
gLocalSearch.setCenterPoint(gMap.getCenter());
gLocalSearch.execute(query);
}
// Called when Local Search results are returned, we clear the old
// results and load the new ones.
function OnLocalSearch() {
if (!gLocalSearch.results) return;
var searchWell = document.getElementById("searchwell");
// Clear the map and the old search well
searchWell.innerHTML = "";
for (var i = 0; i < gCurrentResults.length; i++) {
gCurrentResults[i].marker().setMap(null);
}
// Close the infowindow
gInfoWindow.close();
gCurrentResults = [];
for (var i = 0; i < gLocalSearch.results.length; i++) {
gCurrentResults.push(new LocalResult(gLocalSearch.results[i]));
}
var attribution = gLocalSearch.getAttribution();
if (attribution) {
document.getElementById("searchwell").appendChild(attribution);
}
// Move the map to the first result
var first = gLocalSearch.results[0];
gMap.setCenter(new google.maps.LatLng(parseFloat(first.lat),
parseFloat(first.lng)));
}
// Cancel the form submission, executing an AJAX Search API search.
function CaptureForm(searchForm) {
gLocalSearch.execute(searchForm.input.value);
return false;
}
// A class representing a single Local Search result returned by the
// Google AJAX Search API.
function LocalResult(result) {
var me = this;
me.result_ = result;
me.resultNode_ = me.node();
me.marker_ = me.marker();
google.maps.event.addDomListener(me.resultNode_, 'mouseover', function() {
// Highlight the marker and result icon when the result is
// mouseovered. Do not remove any other highlighting at this time.
me.highlight(true);
});
google.maps.event.addDomListener(me.resultNode_, 'mouseout', function() {
// Remove highlighting unless this marker is selected (the info
// window is open).
if (!me.selected_) me.highlight(false);
});
google.maps.event.addDomListener(me.resultNode_, 'click', function() {
me.select();
});
document.getElementById("searchwell").appendChild(me.resultNode_);
}
LocalResult.prototype.node = function() {
if (this.resultNode_) return this.resultNode_;
return this.html();
};
// Returns the GMap marker for this result, creating it with the given
// icon if it has not already been created.
LocalResult.prototype.marker = function() {
var me = this;
if (me.marker_) return me.marker_;
var marker = me.marker_ = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(me.result_.lat),
parseFloat(me.result_.lng)),
icon: gYellowIcon, shadow: gSmallShadow, map: gMap});
google.maps.event.addListener(marker, "click", function() {
me.select();
});
return marker;
};
// Unselect any selected markers and then highlight this result and
// display the info window on it.
LocalResult.prototype.select = function() {
unselectMarkers();
this.selected_ = true;
this.highlight(true);
gInfoWindow.setContent(this.html(true));
gInfoWindow.open(gMap, this.marker());
};
LocalResult.prototype.isSelected = function() {
return this.selected_;
};
// Remove any highlighting on this result.
LocalResult.prototype.unselect = function() {
this.selected_ = false;
this.highlight(false);
};
// Returns the HTML we display for a result before it has been "saved"
LocalResult.prototype.html = function() {
var me = this;
var container = document.createElement("div");
container.className = "unselected";
container.appendChild(me.result_.html.cloneNode(true));
return container;
}
LocalResult.prototype.highlight = function(highlight) {
this.marker().setOptions({icon: highlight ? gRedIcon : gYellowIcon});
this.node().className = "unselected" + (highlight ? " red" : "");
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
function google_kereses_ellenorzes() {
if (document.forms['google_kereses'].queryInput.value=="Budapest") {
alert('Adjon meg keresési feltételt!');
document.forms['google_kereses'].queryInput.value='';
document.forms['google_kereses'].queryInput.focus();
return false;
} else {
document.forms['google_kereses'].submit();
return true;
}
}
</script>
</head>
<body>
<div>
<div>
<div>
<div id="map" style="width: 298px; height: 298px; top: 1px; left: 1px;"></div>
<?php $mitkeres2 = 'Budapest'; ?>
<form name="google_kereses">
<div class="koncertek-a-kozeledben-mezo">
<input type="text" name="queryInput" id="queryInput" value="<?php echo $mitkeres2; ?>" onfocus="if(this.value=='Budapest')this.value = ''" onblur="if(this.value=='')this.value='Budapest'" onchange="google_kereses_ellenoriz();" />
</div>
<div class="koncertek-a-kozeledben-ok-gomb" onclick="doSearch()"></div>
</form>
</div>
</div>
<div>
<div id="searchwell" style="visibility: hidden; width: 0px; height: 0px;"></div>
</div>
</div>
</body>
</html> Sok markeres:
HTML kód:
<title>Google Maps V3 API Sample</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(47.180086, 19.503736),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}
function addMarkers() {
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
<?php
$most = date("Y-m-d H:i:s");
$parancs = "SELECT * FROM koncertek WHERE eloado_id=$eloado_id AND idopont>'".$most."'";
$eredmeny = mysql_query($parancs);
while($sor = mysql_fetch_array($eredmeny)){
$koncerthelyszin_id = $sor["koncerthelyszin_id"];
$parancs2 = "SELECT koncertek.id, koncertek.koncerthelyszin_id, koncerthelyszinek.id, koncerthelyszinek.nev, koncerthelyszinek.koordinata
FROM koncertek
LEFT JOIN koncerthelyszinek
ON koncertek.koncerthelyszin_id=koncerthelyszinek.id WHERE koncerthelyszin_id=$koncerthelyszin_id";
$eredmeny2 = mysql_query($parancs2);
$sor = mysql_fetch_array($eredmeny2);
$nev = $sor["nev"];
$koordinata = $sor["koordinata"];
?>
var latLng = new google.maps.LatLng(<?= $koordinata ?>);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: '<?= $nev ?>',
icon: "design/map-kozelgo-jel.png"
});
<?php
}
$parancs = "SELECT * FROM koncertek WHERE eloado_id=$eloado_id AND idopont<'".$most."'";
$eredmeny = mysql_query($parancs);
while($sor = mysql_fetch_array($eredmeny)){
$koncerthelyszin_id = $sor["koncerthelyszin_id"];
$parancs2 = "SELECT koncertek.id, koncertek.koncerthelyszin_id, koncerthelyszinek.id, koncerthelyszinek.nev, koncerthelyszinek.koordinata
FROM koncertek
LEFT JOIN koncerthelyszinek
ON koncertek.koncerthelyszin_id=koncerthelyszinek.id WHERE koncerthelyszin_id=$koncerthelyszin_id";
$eredmeny2 = mysql_query($parancs2);
$sor = mysql_fetch_array($eredmeny2);
$nev = $sor["nev"];
$koordinata = $sor["koordinata"];
?>
var latLng = new google.maps.LatLng(<?= $koordinata ?>);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: '<?= $nev ?>',
icon: "design/map-korabbi-jel.png"
});
<?php
}
?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width: 440px; height: 280px; margin-top: 10px;"></div> Előre is köszönöm fáradozásod...
U.I.: Remélem jó topic-ban van, elvégre ez amolyan script cucc... Thanx!!!
Google maps API V3 magas szinten!!!
Válaszol idézettel
re: Google maps API V3 magas szinten!!!
, aztán valahogy sikerült, azért másolom a kódot az alábbiakban, hátha tényleg szüksége lesz rá valakinek. Ezzel az injection-os dologgal kapcsolatban csak annyit, hogy örültem, hogy így sikerült összehozni, biztos van bent szépséghiba, használatlan változó vagy valamilyen algoritmikus hiba, hiszen kitörölgettem, hozzáadtam meg mittomén, de köszi a figyelemfelhívást, erről a részről van szó, jó az én php-m is bent van, de az átírható persze:
Bitman_ eredeti hozzászólása
Könyvjelzők