MrFish Posted September 26, 2011 Share Posted September 26, 2011 I have to use google maps frequently so I made something simple to suit my purposes but it's a good base and should be easy to change styles for whatever you need. Thought I'd go ahead and post this. Enjoy! Sample Code: <?php // Irrelevant to GoogleJSMap $Community = new Controller("community", 1, null, true); // Supply API Key $Map = new GoogleJSMap("ABQIAAAAQbKvZ2Jzb7p-l2D0EJ2NhRQJg3pYlbY33RHuh3LyS3s0-mZYuRT0eR665Q5h9HAbVnVyM05l0GLp2Q"); // Irrelevant to GoogleJSMap $str = $Community->get("address") . "+" . $Community->get("city") . "+" . $Community->get("state") . "+" . $Community->get("zip"); // Address array has 4 possible assoc keys // // address - required // name - optional // text - optional // image - optional // // The name, text, and image produce something a bit ugly. Should be easy for // you to style if you need to. $address = array("address" => $str); // Add as many locations as you want. Code automatically centers over them $Map->addLocation($address); // Print JS echo $Map->getJS(); // Print map canvas. Width: 700px | Height: 525px echo $Map->getCanvas(700, 525); ?> Object Code: <?php//Written by Micah Williamson class GoogleJSMap{ private $key; private $canvasId; private $centerLat; private $centerLong; private $locations; function __construct($key) { $this->key = $key; $this->canvasId = md5(rand(0,999999999999999)); $this->centerLat = 0; $this->centerLong = 0; } //Modifiers function addLocation($arr) { $this->locations[] = $arr; } //Helpers function getCanvas($width, $height) { return "<div onload='window.initialize()' id='{$this->canvasId}' style='width:{$width}px; height:{$height}px;'></div>"; } function getJS() { $out = " <script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?sensor=false'></script> <script type='text/javascript'> function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng({$this->centerLat}, {$this->centerLong}); var myOptions = { zoom: 4, center: latlng, scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(\"{$this->canvasId}\"), myOptions); contentString = 'test'; infowindow = new google.maps.InfoWindow ({ content: contentString }); bounds = new google.maps.LatLngBounds(); "; $i = 0; foreach($this->locations as $location) { $address = $location["address"]; $image = $location["image"]; $text = $location["text"]; $name = $location["name"]; $this->locations[$i]["id"] = $randId = md5(rand(0,999999999999999)); $i++; $out .= " var address = '$address'; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker ({ map: map, title: '$name', id: '$randId', position: results[0].geometry.location }); latLong = new google.maps.LatLng(results[0].geometry.location.Pa, results[0].geometry.location.Qa); bounds.extend(latLong); google.maps.event.addListener(marker, 'mouseover', function() { infowindow.content = document.getElementById(marker.id).innerHTML; infowindow.open(map,marker); }); } }); map.fitBounds(bounds); "; } $out .= " } // End initialize window.onload = function(){initialize();} </script>"; $out .= "<div style='display: none;'>"; foreach($this->locations as $location) { $address = $location["address"]; $image = $location["image"]; $text = $location["text"]; $name = $location["name"]; $randId = $location["id"]; if($image != null) $image = "<br/><br/><img style='max-width: 200px; max-height: 100px;' src='$image'/>"; if($text != null) $text = "<br/><br/>$text"; $out .= "<div id='$randId'> <b>$name</b><br/> Address: $address $image $text </div>"; } $out .= "</div>"; return $out; }}?> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.