Buy Now
Sign in

Database Addresses to Google Maps API v3 Markers

ozneilau , August 03 2010
ozneilau

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:

http://brookwoodrealty.com.au/images/stories/screen.jpg

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>

Webilicious Web Design and Development
http://webilicious.com.au

GreyHead

Hi Neil,

Very nice :-)

Bob

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

s
shoaib

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

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

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

j
julia44

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

Hi Julia44,

What code are you using in ChronoConnectivity to do this?

Bob

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

L
Liz7625

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 :
d)8(Z%e8mnjq5!k&%""907yrq8kabU)3(rrq49wyehtaUro%nl8ql9f0U6Zbsp)o81V^fk5b&aypm$sq&q^80st$wgp""2gV

Liz

GreyHead

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

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