leoarce leoarce - 7 months ago 18
PHP Question

how to set multiple infowindows in google maps but with this particular javascript method

I looked all over and even though there are tons of instructions and techniques and javascript code everywhere on how to do this, I can't use any of them, because it will require rewriting all my javascript and php. Is there code for info windows I can drop into this method i am using?

I am reading a csv file and parsing the data with this library (https://github.com/parsecsv/parsecsv-for-php), then I'm putting markers on the map with this icon library (https://github.com/scottdejonge/map-icons). now I need to add info window for each marker (where it displays the first column data of csv file) and I don't know how to go about it. I don't mean i don't know the php variable to use, that part is easy. what I mean is I don't know what infowindow javascript to use.

I am going to paste whole html page plus the contents of the csv file.

<?php
# include parseCSV class.
require_once('../parsecsv.lib.php');
# create new parseCSV object.
$csv = new parseCSV();
# Parse 'test.csv' using automatic delimiter detection...
$csv->auto('test.csv');
# ...or if you know the delimiter, set the delimiter character
# if its not the default comma...
// $csv->delimiter = "\t"; # tab delimited
# ...and then use the parse() function.
// $csv->parse('test.csv');
# Output result.
//echo "<pre>";
//print_r($csv->data);
//echo "</pre>";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map Icons Example</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<!-- Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- Map Icons -->
<link rel="stylesheet" type="text/css" href="../dist/css/map-icons.css">
<script type="text/javascript" src="../dist/js/map-icons.js"></script>
<script type="text/javascript">
function initialise() {
var mapCanvas = document.getElementById('map-canvas');
// Center
var center = new google.maps.LatLng(-27.46834, 153.02365);
// Map Options
var mapOptions = {
zoom: 16,
center: center,
scrollwheel: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{stylers: [{ visibility: 'simplified' }]},
{elementType: 'labels', stylers: [{ visibility: 'off' }]}
]
};
// Create the Map
map = new google.maps.Map(mapCanvas, mapOptions);
<?php
$i=1;
$extendthis = "";
foreach ($csv->data as $key => $row):
// We define our address
$fulladdress = $row['address'].",".$row['city'].",".$row['state'].",".$row['zip'];
$marker = $row['marker'];
$icon = $row['icon'];
$fillcolor = $row['fillcolor'];
//if no marker or icon or fillcolor is set, use default ones...
if ($marker=="") {
$marker = "MAP_PIN";
}
if ($icon=="") {
$icon = "";
}
if ($fillcolor=="") {
$fillcolor = "6331AE";
}
// We get the JSON results from this request
$geo = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($fulladdress).'');
// We convert the JSON to an array
$geo = json_decode($geo, true);
// If everything is cool
if ($geo['status'] = 'OK') {
// We set our values
$latitude = $geo['results'][0]['geometry']['location']['lat'];
$longitude = $geo['results'][0]['geometry']['location']['lng'];
}
echo "var Item_".$i." = new google.maps.LatLng(".$latitude.", ".$longitude.");\n";
echo "var marker1 = new Marker({\n";
echo "map: map,\n";
echo "title: 'Uluru (Ayers Rock)',\n";
echo "position: Item_".$i.",\n";
echo "icon: {\n";
echo "path: ".$marker.",\n";
echo "fillColor: '#".$fillcolor."',\n";
echo "fillOpacity: 1,\n";
echo "strokeColor: '',\n";
echo "strokeWeight: 0\n";
echo "},\n";
echo "map_icon_label: '<span class=\"map-icon ".$icon."\"></span>'\n";
echo "});\n";
$extendthis .= "bounds.extend(Item_".$i.");\n";
$i++;
endforeach;
?>
var bounds = new google.maps.LatLngBounds();
<?php echo $extendthis; ?>
map.fitBounds(bounds);
};
google.maps.event.addDomListener(window, 'load', initialise);
</script>
<style media="screen">
html, body {
padding:0;
margin:0;
width:100%;
height:100%;
}
#map-canvas {
padding:0;
margin: 0;
width: 50%;
height: 50%;
}
table { background-color: #BBB; }
th { background-color: #EEE; }
td { background-color: #FFF; }
</style>
</head>
<body>
<table border="0" cellspacing="1" cellpadding="3">
<tr>
<?php foreach ($csv->titles as $value): ?>
<th><?php echo $value; ?></th>
<?php endforeach; ?>
</tr>
<?php foreach ($csv->data as $key => $row): ?>
<tr>
<?php foreach ($row as $value): ?>
<td><?php echo $value; ?></td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</table>
<div id="map-canvas"></div>
</body>
</html>


test.csv:

name,address,city,state,zip,marker,icon,fillcolor
one,7505 3rd Street,Schenectady,NY,12302,,,
two,6422 Route 29,Bear,DE,19701,MAP_PIN,,00CCBB
three,2858 Lakeview Drive,Venice,FL,34293,,,
four,335 Lincoln Street,Augusta,GA,30906,,,
five,3907 Cardinal Drive,San Antonio,TX,78213,SQUARE_PIN,,00CCBB
six,8560 State Street,Drexel Hill,PA,19026,,,


Updated version, but still not working:

<script type="text/javascript">
var iw;
function initialise() {
var mapCanvas = document.getElementById('map-canvas');
// Center
var center = new google.maps.LatLng(-27.46834, 153.02365);
// Map Options
var mapOptions = {
zoom: 16,
center: center,
scrollwheel: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{stylers: [{ visibility: 'simplified' }]},
{elementType: 'labels', stylers: [{ visibility: 'off' }]}
]
};
// Create the Map
map = new google.maps.Map(mapCanvas, mapOptions);
iw = new google.maps.InfoWindow();
<?php
$i=1;
$extendthis = "";
foreach ($csv->data as $key => $row):
$name = $row['name'];
// We define our address
$fulladdress = $row['address'].",".$row['city'].",".$row['state'].",".$row['zip'];
$marker = $row['marker'];
$icon = $row['icon'];
$fillcolor = $row['fillcolor'];
//if no marker or icon or fillcolor is set, use default ones...
if ($marker=="") {
$marker = "MAP_PIN";
}
if ($icon=="") {
$icon = "";
}
if ($fillcolor=="") {
$fillcolor = "6331AE";
}
// We get the JSON results from this request
$geo = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($fulladdress).'');
// We convert the JSON to an array
$geo = json_decode($geo, true);
// If everything is cool
if ($geo['status'] = 'OK') {
// We set our values
$latitude = $geo['results'][0]['geometry']['location']['lat'];
$longitude = $geo['results'][0]['geometry']['location']['lng'];
}
echo "var Item_".$i." = new google.maps.LatLng(".$latitude.", ".$longitude.");\n";
echo "var marker".$i." = new Marker({\n";
echo "map: map,\n";
//echo "title: 'your title here',\n";
echo "content: '".$name."',\n";
echo "position: Item_".$i.",\n";
echo "icon: {\n";
echo "path: ".$marker.",\n";
echo "fillColor: '#".$fillcolor."',\n";
echo "fillOpacity: 1,\n";
echo "strokeColor: '',\n";
echo "strokeWeight: 0\n";
echo "},\n";
echo "map_icon_label: '<span class=\"map-icon ".$icon."\"></span>'\n";
echo "});\n";
echo "marker".$i.".addListener('click',function(m) { iw.setContent(m.content);iw.open(map,m); });\n";
$extendthis .= "bounds.extend(Item_".$i.");\n";
$i++;
endforeach;
?>
var bounds = new google.maps.LatLngBounds();
<?php echo $extendthis; ?>
map.fitBounds(bounds);
};
google.maps.event.addDomListener(window, 'load', initialise);
</script>

Answer

You can solve this with just one infowindow:

Define a global variable to store the infowindow. In order to be used by the click event, it should be global. To do so, define it outside the function:

<script type="text/javascript">
var iw;
function initialise() {
...

And then instantiate a new infowindow in the initialise function:

function initialise() {
     iw=new google.maps.InfoWindow();
     ...

You can add custom properties to the markers. Say, for example, "content" and set the content for the marker's infowindow there:

echo "var marker$i = new Marker({content:'content for current marker here',\n";
...

Then add a click event to the marker:

echo "marker$i.addListener('click',function(e) { iw.setContent(this.content);iw.open(map,this); });";