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:
BODY:
FOOTER:
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>
