Question

I have looked around and found various geocoding examples using Googles API and I am now stuck.

I have used Google API to convert a postcode into longitude and latitude coordinates, but now I want a Google map that uses those coordinates and the postcode to show a marker and then place the map on my site. Exactly the same as the iframe that you can get from the google maps site :

For example this :

Link of Google Map.

My site will go load the lat and long from my MySQL database and then place them into a link but just no luck!

Any ideas?

Answer 1

Fetch the $postadress, lat and long value from database and then you these values like ,

 <script  type="text/javascript">
     var locations = [['$postaddress ;','$lat;', ' $long;', '1'],];
 </script>

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

  <div id="map" class="googlemapimage"></div>

  <script type="text/javascript">

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom:15,  
      center: new google.maps.LatLng(<?php echo $lat;?>, <?php echo $long; ?>),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }

      })(marker, i));
      google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
        return function() {

          infowindow.close();
        }

      })(marker, i));
       google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
        infowindow.setContent(locations[i][0]);
           infowindow.open(map, marker);
        }

      })(marker, i));
    }
  </script>