MsKrissy
asked on
Google Maps Multiple Markers
Hi,
I call my location, name and image from my db and plot it on a google map. I can't figure out how to have it show my contacts as well. I am using google maps v3. I have all my contacts (name, location and image) echo'd to screen already, I just need the markers to plot themselves based on the contacts current_location.
Can someone help me please?
snippet (of my contact data that is echo'd):
foreach( $result as $contacts)
{
echo $contacts['first_name'].' '.$contacts['last_name'].' '.$contacts['current_locat ion']['nam e'].' '.$contacts['pic']. '<br>';
}
I call my location, name and image from my db and plot it on a google map. I can't figure out how to have it show my contacts as well. I am using google maps v3. I have all my contacts (name, location and image) echo'd to screen already, I just need the markers to plot themselves based on the contacts current_location.
Can someone help me please?
snippet (of my contact data that is echo'd):
foreach( $result as $contacts)
{
echo $contacts['first_name'].' '.$contacts['last_name'].'
}
var me = <?php echo json_encode( $me ); ?>;
var geocoder;
var map;
var address = me['location']['name'];
var name = me['first_name'] + " " + me['last_name'];
var pic = '<img src="' + me['pic'] + '" height="60px"';
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<p>'+pic+'</p>',
size: new google.maps.Size(150,50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
new google.maps.Marker({
position: LAT_LONG,
map: map,
icon: new google.maps.MarkerImage(IM AGE_URL,
new google.maps.Size(60, 60))
});
position: LAT_LONG,
map: map,
icon: new google.maps.MarkerImage(IM
new google.maps.Size(60, 60))
});
ASKER
Okay, I have made the following changes, but I am still stuck. What am I doing wrong.
Note:
I am trying to use address' (Logan Utah instead of latLng)
Note:
I am trying to use address' (Logan Utah instead of latLng)
var me = <?php echo json_encode( $me ); ?>;
var geocoder;
var map;
//var address = me['location']['name'];
var name = me['first_name'] + " " + me['last_name'];
var pic = '<img src="' + me['pic'] + '" height="60px"';
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(34.44, 117.10);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<p>'+pic+'</p>',
size: new google.maps.Size(150,50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:name
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
/////////////////////////////////////////////////////NEW CODE ADDED TO PLOT MULTIPLE MARKERS///////////////////////////
var NewMarkers = new Array();
function addMarkers()
{
var Address ="<?php echo $contacts['current_location']['name'].";" ?>";
var Name ="<?php echo $full_name; ?> ";
var Pic ="<?php echo "<img src=$contacts[pic] height=60px >"; ?>";
for (i=0; i<Address.length; i++)
{
if (Address[i] != "")
{
// add marker
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:Name
});
var infowindow = new google.maps.InfoWindow(
{ content: '<p>'+Pic+'</p>',
size: new google.maps.Size(150,50)
});
NewMarkers[i] = marker;
What address in Logan Utah? I will show an example.
ASKER
Here is the address,
Address: 1400 Old Main Hill
Logan, Utah 84322-1400
Address: 1400 Old Main Hill
Logan, Utah 84322-1400
Moving parts start at about line 245. You can add other markers / icons by either address or lat/lon pair with the setMarker() or setIcon() methods.
<?php // RAY_google_static_map_class.php
error_reporting(E_ALL);
// DEMONSTRATE HOW TO USE THE GOOGLE MAPS API
// FOR A STATIC MAP OF SPECIFIC SIZE
// OPTIONAL CENTERED PUSHPIN
// OPTIONAL OTHER PUSHPIN(S) OR ICONS
// MAN PAGE: http://code.google.com/apis/maps/documentation/staticmaps/
// DEFINE THE GOOGLE STATIC MAPPING CLASS
class GSM
{
// THE MAP CENTER GEOCODE, ADDRESS OR LANDMARK
protected $center;
// MARKER DATA ARRAY
protected $markers;
protected $default_icon;
// OUR VARIABLES FOR THE MAP DISPLAY
protected $maptype;
protected $width;
protected $height;
protected $zoom;
protected $format;
// OUR VARIABLES FOR THE GOOGLE URL AND IMAGE TAG
protected $alt;
protected $title;
protected $class;
protected $id;
protected $usemap;
protected $sensor;
protected $url;
private $img;
// A CONSTRUCTOR TO SET THE DEFAULT VALUES
public function __construct()
{
// THE URL AND IMG TAG PARAMETERS
$this->alt = FALSE;
$this->class = FALSE;
$this->id = FALSE;
$this->usemap = FALSE;
$this->sensor = FALSE;
$this->title = TRUE;
$this->url = '';
$this->img = '';
// THE CENTER AND ZOOM SCALE OF THE MAP (IF OMITTED, GOOGLE WILL CALCULATE)
$this->center = NULL;
$this->zoom = NULL;
// THE CHARACTERISTICS OF THE MAP IMAGE
$this->maptype = 'hybrid'; // CHOOSE
$this->maptype = 'terrain'; // AMONG
$this->maptype = 'satellite'; // THESE
$this->maptype = 'roadmap'; // OPTIONS
$this->width = '640';
$this->height = '640';
$this->format = 'png';
// THE DEFAULT ICON
$this->default_icon = 'http://maps.google.com/mapfiles/ms/micons/question.png';
// AN ARRAY OF MARKER ARRAYS
$this->clearMarkers();
} // END CONSTRUCTOR
// A METHOD TO CLEAR THE MARKERS
public function clearMarkers()
{
$this->markers = array();
}
// A SETTER TO ADD MARKERS TO THE MAP
public function setMarker($geocode, $color='blue', $label='X', $shadow='true')
{
$this->markers[]
= array
( 'color' => $color
, 'label' => $label
, 'shadow' => $shadow
, 'geocode' => $geocode
, 'icon' => FALSE
)
;
}
// A SETTER TO ADD ICONS TO THE MAP - VIEW SOURCE HERE: http://www.visual-case.it/cgi-bin/vc/GMapsIcons.pl
public function setIcon($geocode, $icon=FALSE, $shadow='true')
{
if (!$icon) $icon = $this->default_icon;
$this->markers[]
= array
( 'color' => FALSE
, 'label' => FALSE
, 'shadow' => $shadow
, 'geocode' => $geocode
, 'icon' => $icon
)
;
}
// A SETTER TO OVERRIDE EACH OF THE DEFAULT VALUES
public function setCenter($geocode=NULL)
{
$this->center = $geocode;
}
public function setMaptype($x)
{
$this->maptype = $x;
}
public function setFormat($x)
{
$this->format = $x;
}
public function setWidth($x)
{
$this->width = $x;
}
public function setHeight($x)
{
$this->height = $x;
}
public function setZoom($x=NULL)
{
$this->zoom = $x;
}
public function setAlt($x=FALSE)
{
$this->alt = $x;
}
public function setTitle($x=TRUE)
{
$this->title = $x;
}
public function setClass($x=FALSE)
{
$this->class = $x;
}
public function setId($x=FALSE)
{
$this->id = $x;
}
public function setUsemap($x=FALSE)
{
$this->usemap = $x;
}
public function setSensor($x=FALSE)
{
$this->sensor = $x;
}
// A METHOD TO PREPARE AND RETRIEVE THE MAPPING URL
public function asURL()
{
$s = 'false'; // SEE http://code.google.com/apis/maps/documentation/staticmaps/#Sensor
if ($this->sensor) $s = 'true';
// IF ICONS OR MARKERS ARE ON THE MAP, 'IMPLODE' THE DATA INTO THE URL
$marker_string = '';
foreach ($this->markers as $marker)
{
// PROCESS FOR CUSTOM ICONS
if ($marker['icon'])
{
$marker_string
= $marker_string
. '&markers='
. 'icon:'
. urlencode($marker['icon'])
. '|'
. 'shadow:'
. urlencode($marker['shadow'])
. '|'
. $marker['geocode']
;
continue;
}
// PROCESS FOR STANDARD MARKERS
$marker_string
= $marker_string
. '&markers='
. 'color:'
. $marker['color']
. '|'
. 'label:'
. $marker['label']
. '|'
. $marker['geocode']
;
}
// SET CENTER AND ZOOM, IF PRESENT
$c = '';
if ($this->center) $c = "¢er=$this->center";
$z = '';
if ($this->zoom) $z = "&zoom=$this->zoom";
// MAKE THE URL
$this->url
= "http://maps.google.com/maps/api/staticmap?sensor=$s"
. $c
. $z
. "&size=$this->width" . 'x' . "$this->height"
. "&format=$this->format"
. "&maptype=$this->maptype"
. "$marker_string"
;
return $this->url;
}
// A METHOD TO PREPARE AND RETRIEVE THE HTML IMAGE TAG
public function asIMG()
{
// GET THE URL
if (!$this->url) $this->url = $this->asURL();
// GET THE ALT TEXT
$a = "$this->maptype" . ' centered ' . "$this->center";
if ($this->alt !== FALSE) $a = $this->alt;
// REQUIRED FIELDS
$this->img = '<img src="' . $this->url . '" alt="' . $a . '"';
// OPTIONAL FIELDS - PROVIDE A DEFAULT TITLE
$t = "$this->maptype" . ' centered ' . "$this->center";
if ($this->title === TRUE ) { $this->img .= ' title="' . $t . '"'; }
elseif ($this->title !== FALSE) { $this->img .= ' title="' . $this->title . '"'; }
// OPTIONAL FIELDS MAY BE OMITTED
if ($this->class !== FALSE) { $this->img .= ' class="' . $this->class . '"'; }
if ($this->id !== FALSE) { $this->img .= ' id="' . $this->id . '"'; }
if ($this->usemap !== FALSE) { $this->img .= ' usemap="' . $this->usemap . '"'; }
// CLOSE THE IMAGE TAG AND CLEAR THE CONSUMED URL
$this->img .= ' />';
$this->url = FALSE;
return $this->img;
}
} // END CLASS
// MAKE A GOOGLE STATIC MAP OBJECT AND TEST IT OUT
$x = new GSM;
$x->setWidth(620);
$x->setHeight(620);
$x->setZoom(12);
// SET A CENTER POINT (BUT NO MARKER) BY ADDRESS
$x->setCenter("1400 Old Main Hill, Logan, Utah 84322-1400");
// SET A SNOWFLAKE AT THE CENTER POINT, WITH A DROP SHADOW
$x->setIcon("1400 Old Main Hill, Logan, Utah 84322-1400", 'http://maps.google.com/mapfiles/ms/micons/snowflake_simple.png');
// ECHO THE <img /> TAG INTO OUR HTML TO DRAW THE MAP
echo $x->asIMG();
ASKER
Thank you so much, this was very helpful. What if I wanted to add additional markers from variables that are stored in my sql db? I currently have them echoing to screen like so:
foreach( $result as $contacts)
{
echo $contacts['first_name'].' '.$contacts['last_name'].' '.$contacts['current_locat ion']['nam e'].' '.$contacts['pic']. '<br>';
}
foreach( $result as $contacts)
{
echo $contacts['first_name'].' '.$contacts['last_name'].'
}
Does this contain an address?
$contacts['current_locatio n']['name' ]
$contacts['current_locatio
ASKER
yeah it does.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you for the help, I really appreciate your time.
Thanks for the points -- glad I could help, ~Ray
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_3350-Using-the-Google-Maps-API-in-PHP.html