drevls8138
2011-10-21 05:41
浏览 64
已采纳

谷歌地图API v3 - 简单,但从php / mysql添加地址的地理编码

I have this simple hello world version of a google map api javascript v3 and it works for a static geocode. My data is normal addresses (i.e. "30 rockefeller center, New York, NY").

This data is being called from with php from a mysql database. I can get the address on the page with something like this...For the purpose of this post, say this would have all info: address, city, state, zip code

<?php echo $row_query_details['address'];?>

So, I need to geocode this info for the map. I'm very comfortable with mysql and php, but not as much with javascript. I have been trial/error and researching this for a couple of days.

I have looked everywhere for a working sample or example and feel like this relatively simple problem must have been asked and answered many times over, but I cannot figure it out!

Thanks in advance.

Here is the code I'm working with:

            <!DOCTYPE html>
            <html>
            <head>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <style type="text/css">
              html { height: 100% }
              body { height: 100%; margin: 0; padding: 0 }
              #map_canvas { height: 100% }
            </style>
            <script type="text/javascript"
                src="http://maps.googleapis.com/maps/api/js?sensor=false">
            </script>
            <script type="text/javascript">
              function initialize() {
                var latlng = new google.maps.LatLng(-34.397, 150.644);
                var myOptions = {
                  zoom: 8,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);
             var marker = new google.maps.Marker({
                  position: latlng,
                  title:"Hello World!"
              });

              // To add the marker to the map, call setMap();
              marker.setMap(map);  
              }

            </script>
            </head>
            <body onload="initialize()">
              <div id="map_canvas" style="width:500px; height:500px"></div>
            </body>
            </html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dtewnsdf47253 2011-10-25 21:37
    已采纳

    So, I'm going to answer my own question here. The first answer provided I was not able to utlize. I'm not sure if the answer was incomplete or I just didnt' follow it. Regardless, here's what the code looks like:

    First I had my address components pulling from the mysql db and I assigned them variables, like this:

    $county = $row_qry['county'];
    $address = $row_qry['address'];
    $city = $row_qry['city'];
    $state = $row_qry['state'];
    

    Then, my google v3 stuff looks like this:

                <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
                <script type="text/javascript">
                  var geocoder;
                  var map;
                  function initialize() {
                    geocoder = new google.maps.Geocoder();
                    var latlng = new google.maps.LatLng(34.052234,-118.243685);
                    var address = '<?php echo $address.', '.$city.', '.$state; ?>';
    
                    var myOptions = {
                      zoom: 14,
                      center: latlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    geocoder.geocode( { 'address': address}, function(results, status) {
                      if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: map, 
                            position: results[0].geometry.location
                        });
                      } else {
                        alert("Geocode was not successful for the following reason: " + status);
                      }
                    });
                  }
    
    
                </script>
    

    And that sort of answers my question. There are a couple of issues I still need to resolve, such as (a) how to make the marker be clickable and interactive, and (b) the map flashes a the geocode first defined (34.05,-118.24) before showing the correct address.

    Both of these issues I need to still resolve, but at least the geocoding is working successfully. Hope this helps someone else.

    Thanks!

    点赞 打赏 评论
  • dongshi3818 2011-10-21 06:41

    You can use your PHP variable into JavaScript by passing php variables in function initialize().

    your body tag will look like below;

    For Ex:

    <body onload="initialize('<?php echo $row_query_details['address'];?>')">

    Then you will use this particular variable in your javascript code, your javascript function will look like below:

    <script type="text/javascript">
                  function initialize(address) {
    
                    var G_address = address;
    
                    var latlng = new google.maps.LatLng(-34.397, 150.644);
                    var myOptions = {
                      zoom: 8,
                      center: latlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("map_canvas"),
                        myOptions);
                 var marker = new google.maps.Marker({
                      position: latlng,
                      title:"Hello World!"
                  });
    
                  // To add the marker to the map, call setMap();
                  marker.setMap(map);  
                  }
    
                </script>
    

    Now you can use this G_address JavaScript variable dynamically in your G-MAP code..

    This will be helpful to you..

    点赞 打赏 评论
  • douyan1244 2012-10-26 03:01

    Hello and happy anniversary (regarding your question and tutorial). I am a web-developer and must thank you. I used this tutorial as I currently do not have a way to geocode via submit (lat/long needs to be pulled from address stored in db) as I am consulting an existing site and have minimal access to backend code.

    To answer your question regarding marker interactivity, this takes a few easy steps:

    1) Provide some content. This is done before declaring the geocoder (var geocoder;):

    var contentString = 
      'line 1'+
      'line 2';
    

    2) Underneath the marker declaration ( var marker = new google.maps.Marker({ ), you will need to declare infowindow and add the event listener:

    var infowindow = new google.maps.InfoWindow({
    content: contentString
    });
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });
    

    Edit:

    I have successfully pulled array information from a MySQL database by expanding on your method. My method is here:

    1) Basic php below:

    include (dbinfo.php)
    $result = mysql_query( 'SELECT * FROM table')
    $count = 0
    

    2) Setting up google maps API:

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

    3) Geocoding setup below:

    <script type="text/javascript">
    var geocoder;
    var map;
    function initialize() {
    var latlng = new google.maps.LatLng(yourlat, yourlong); //This is to center the map
    var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    <?php  //Starts while loop so all addresses for the given information will be populated.
    while($row = mysql_fetch_array($result)) //instantiates array
    { ?>            
    geocoder = new google.maps.Geocoder();
    var address = '<?php echo $row['address'].', '.$row['city'].', '.$row['state'].', '.$row['zip'].', '.$row['country']; ?>';
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    //marker generation is done though adding the primary ID to the "marker" variable, so if address "1" has the primary ID of "1", your marker would read "marker1"
    var marker<?php print $row['primaryID']; ?> = new google.maps.Marker({
    map: map, 
    position: results[0].geometry.location,
    title: "This can be a php variable or whatever you like.  It is displayed on hover."
                        });
    
    //var contentString manages what is seen inside of the popup            
    var contentString = 
    'line 1'+
    'line 2';
    
    var infowindow = new google.maps.InfoWindow({
    content: contentString
    });
    google.maps.event.addListener(marker<?php print $row['primaryID']; ?>, 'click', function() {
    infowindow.open(map,marker<?php print $row['primaryID']; ?>);
                        });
                      } else {
                        alert("Geocode was not successful for the following reason: " + status);
                      }
                    });
                    <?php
        $count++;
    } //ends while
    ?>
                  }
    
    /*end javascript*/
    </script>
    

    Thank you very much again for posting this. It was very useful.

    点赞 打赏 评论

相关推荐 更多相似问题