Buy Now
Sign in

Database Addresses to Google Maps API v3 Markers

ozneilau , August 03 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: (thanks Bob!)

I hope this is useful for you!


//Insert required Google maps lines into the HTML HEADER section
$doc =& JFactory::getDocument();
$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"),
google.maps.event.addListener(map, 'click', function() {


    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);



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() {

window.onload = initialize;


<div id="map_canvas" style="width: 550px; height: 400px; margin: 10px 0px 0px 0px;"></div>
Webilicious Web Design and Development
Hi Neil,

Very nice :-)

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
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.

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.

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
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.
Hi Julia44,

What code are you using in ChronoConnectivity to do this?

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
Hey guys,

I am also trying to do something similar to what Julia44 was mentioning, but i am new to Chrono and would appreeciate if anybody would have a link to where i could find more info on how to do this?

Thanks :

Hi Liz,

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

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much