CODEWITHSUNDEEP
phpmysqlapigoogle-maps
Kevin
Kevin

Reputation: 1725

Google Maps API v3 - Simple but add Geocode of address from 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>

Upvotes: 1

Views: 6501

Answers (3)

Demir Oral
Demir Oral

Reputation: 65

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.

Upvotes: 3

Kevin
Kevin

Reputation: 1725

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!

Upvotes: 0

Chandresh M
Chandresh M

Reputation: 3828

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..

Upvotes: 0

Related Questions