Database Addresses to Google Maps API v3 Markers

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>

Hi Neil,

Very nice :-)

Bob

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.
🙂

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

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?

Bob

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

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