Buy Now
Sign in

Database Addresses to Google Maps API v3 Markers

ozneilau , August 03 2010
ozneilau 96
August 03 2010 #55433
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>
Webilicious Web Design and Development
https://webilicious.com.au
https://iconifier.net
https://webhostingdownunder.com.au
GreyHead 63.2
August 03 2010 #55435
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 70
May 30 2011 #70479
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 63.2
May 30 2011 #70483
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 1
August 16 2011 #74767
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 63.2
August 16 2011 #74775
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 1
June 24 2013 #312805
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 63.2
June 24 2013 #312808
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