Home/ Questions/Q 6746265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T12:18:08+00:00

I have this simple hello world version of a google map api javascript v3

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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!

    • 0