Forums

Database Addresses to Google Maps API v3 Markers

ozneilau 03 Aug, 2010
I have used Chronoconnectivity to display addresses stored in the database as markers on a Google map together with titles and info-windows. Here is a screen shot:



The relevant code (mostly javascript with some PHP) is shown below.

I am a beginner with javascript and PHP and found these links especially helpful:

http://www.geocodezip.com
http://chronoengine.com/forums.html?cont=posts&f=2&t=17787 (thanks Bob!)

I hope this is useful for you!

HEADER:

<?php
  //Insert required Google maps lines into the HTML HEADER section
  $doc =& JFactory::getDocument();
  $doc->addScript('http://maps.google.com/maps/api/js?sensor=false');
  $doc->setMetaData( 'viewport', 'initial-scale=1.0, user-scalable=no' );
  $doc->addStyleDeclaration( 'html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% }' , 'text/css' );
?>

<script type="text/javascript"> 
  var image = new google.maps.MarkerImage('images/stories/purple_marker.png',
    new google.maps.Size(20, 34),
    new google.maps.Point(0,0),
    new google.maps.Point(10, 34));
  var shadow = new google.maps.MarkerImage('images/stories/pin_shadow.png',
    new google.maps.Size(31,26),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 26));
  var map = null;
  var geocoder = null;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var myOptions = {
      zoom: 11,
      center: new google.maps.LatLng(-31.875, 116.208),
      mapTypeControl: true,
      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
      navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });


BODY:

    var address = "{StreetNumber} {Street}, {Suburb}, Western Australia";
    geocoder.geocode( { 'address': address, 'region': 'au' }, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = createMarker(results[0].geometry.location,"<b>{StreetNumber} {Street}, {Suburb}</b><br />{PriceRange}<br />{Title}<br />{Bedrooms} Bedrooms, {Bathrooms} Bathrooms<br />",
        "{StreetNumber} {Street}, {Suburb}");
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });


FOOTER:

  } 
 
  var infowindow = new google.maps.InfoWindow(
    { 
      size: new google.maps.Size(150,50)
    });
    
  function createMarker(latlng, description, address) {
    var contentString = description;
    var marker = new google.maps.Marker({
        position: latlng,
        icon: image,
        shadow: shadow,
        map: map,
        title: address
        });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
  }

  window.onload = initialize;

</script>

<div id="map_canvas" style="width: 550px; height: 400px; margin: 10px 0px 0px 0px;"></div>
GreyHead 03 Aug, 2010
Hi Neil,

Very nice :-)

Bob
shoaib 30 May, 2011
Hi Neil,

Thanks for sharing this. I was able to do this in Chronoconnectivity. But How to have Google map in Chronoform. Because I need To Display this Google map with Marker in Module Position.




Regards,
Shoaib.
🙂
GreyHead 30 May, 2011
Hi shoaib,

I think that the other thread that Neil links to was a ChronoForms example; there are a couple in the forums here.

It might also be possible to work with Mike Reumer's Google Maps plug-in inside a ChronoForm.

Bob
julia44 16 Aug, 2011
I am trying to build a script that pulls in data from a database using php/mysql. And I want to create a sidebar with the locations in
my database.
I am able to pull in data and display the locations on my map just fine ... but the sidebar is not displaying any of my markers I am pretty sure there is a problem with the part of my code that creates the markers.. i'm new to javascript though so could be wrong though.
GreyHead 16 Aug, 2011
Hi Julia44,

What code are you using in ChronoConnectivity to do this?

Bob
GreyHead 24 Jun, 2013
Hi Liz,

This is an old thread. Exactly what do you need to do and are you using ChronoForms or ChronoConnectivity (or something else)?

Bob
This topic is locked and no more replies can be posted.