开发者

How can I load markers from MySQL database dynamically?

开发者 https://www.devze.com 2023-01-27 07:36 出处:网络
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 -

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.


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; 
} 


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.


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
    });
}

}

0

精彩评论

暂无评论...
验证码 换一张
取 消