How can I load markers from MySQL database dynamically? - php

Question

I have a MySQL database where I stored some marker position (along with some other information) which I loaded into google map. I followed the example -
http://code.google.com/apis/maps/articles/phpsqlajax.html
and it worked fine for me.
Now what I want to do is, suppose a user will be able to choose an id of a specific marker and clicking on a button it will be loaded onto the map. Not sure how to load the specific marker on the map dynamically.
Any sort of help will be appreciated.

Answer 1

I have set up an example here. I am using the Google Geocoding API to receive co-ordinates of the address entered by the user and creating the marker using Google API V3 as shown below
Ajax Request to get the co-ordinates
$.getJSON("getjson.php?address="+address,
function(data){
lat=data.results[0].geometry.location.lat;
lng=data.results[0].geometry.location.lng;
point= new google.maps.LatLng(lat,lng);
map.setCenter(point);
zoom = 14;
marker = createMarker(point,"<h3>Marker"+(markersArray.length+1)+" "+point+"</h3>",zoom);
});
PHP Code to return the co-ordinates
<?php
$address = $_GET['address'];
$address=str_replace(" ","+",$address);
if ($address) {
$json = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.$address.
'&sensor=true');
echo $json;
}
?>
Creating the Marker
function createMarker(latlng, html,zoom) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
marker.MyZoom = zoom;
return marker;
}

Answer 2

First of all i see in your link that you use v2.Try to use v3 at least now that you are at the beginning since the v2 is deprecated.
As of your question i can only tell you the procedure and then you can make it happen.
1. User interaction
User interacts with UI and selects i.e. a range of prices(0-100).
2. Ajax request
The client sends an ajax request to server to get json with jquery getJson() or any other way.
3. Server Respond
A php page responds to your ajax call and make a query in mysql getting a resultset of position-markers,converts it in json and send it back.
4. Parse respond
Parse the json back to the client and create markers.

Answer 3

Hi I found this one great help
http://www.svennerberg.com/2012/03/adding-multiple-markers-to-google-maps-from-json/
Create a json object as given the link and pass it to javascript .
function createMarker(json){
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
}
}