Following the Google Maps documentation, I was able to import the data from a mysql DB.
I was even able to apply marker type analysis and add labels to the markers, as seen in the image below.
Now, I would like to remove that label, and put in different pins. I define the tags in the following routine when starting the js script:
var customLabel = {
1: {
label: 'S'
},
2: {
label: 'E'
},
3: {
label: 'M'
},
4: {
label: 'T'
},
};
the marker is set in the following routine:
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
I could in that same routine where I define to put the letter S if the value is 1, ..., etc choose the type of icon to show? I tried to follow the google maps documentation about the types of markers, but without results... Can someone give me a hand? I build the customLabel from a base field that has the values 1, 2, 3, ... Etc
I would like to use these icons
CODE I HAVE ON THE PAGE:
TABLE FROM WHERE I TAKE THE DATA:
CREATE TABLE `markers` (
`id` bigint(20) UNSIGNED NOT NULL,
`tipo` varchar(60) NOT NULL,
`lat` varchar(30) NOT NULL,
`lng` varchar(30) NOT NULL,
`descripcion` varchar(500) DEFAULT NULL,
`realizo` varchar(200) NOT NULL,
`idtipo` tinyint(4) NOT NULL,
`visible` tinyint(1) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
MAIN CODE OF THE PAGE THAT LOADS THE DATA:
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Mapa de Google Maps</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map" style="width: 800px; height:500px;"></div>
<script>
var customLabel = {
1: {
label: 'S'
},
2: {
label: 'E'
},
3: {
label: 'M'
},
4: {
label: 'T'
},
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-34.609555, -58.388772),
zoom: 10
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl('resultado.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<input type="text" name="lat" value="">
<input type="text" name="lng" value="">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=*******YOUR API KEY***********&callback=initMap">
</script>
</body>
</html>
FILE CODE result.php where I get the information from the database:
<?php
session_start(); //Iniciar una nueva sesión o reanudar la existente
require '../../includes/conexion.php';
include '../../includes/funcs_pdo.php';
function parseToXML($htmlStr){
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Select all the rows in the markers table
$conexion = new Conexion();
$stmt = $conexion -> prepare("SELECT id, tipo, lat, lng, descripcion, idtipo FROM markers WHERE visible=1 ORDER BY id DESC");
$stmt->execute();
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
if ($stmt->rowCount() > 0) {
while($row_markers=$stmt->fetch(PDO::FETCH_ASSOC)){
echo '<marker ';
echo 'name="' . parseToXML($row_markers['tipo']) . '" ';
echo 'address="' . parseToXML($row_markers['descripcion']) . '" ';
echo 'lat="' . $row_markers['lat'] . '" ';
echo 'lng="' . $row_markers['lng'] . '" ';
echo 'type="' . $row_markers['idtipo'] . '" ';
echo '/>';
}
}
// End XML file
echo '</markers>';
All this information appears in the Google Maps documentation and I adapted it with my connection to the database and the result of this is the map that appears in the image above.
When you do:
You are setting the attribute
labelwhich is the text you see on your map, but you are omitting the attributeiconand so they all draw with the default icon. Could you do:And then:
Reviewing the data you have stored and how you want to display them, I leave you the following fragment so that you can adapt it according to your convenience.
This example shows the return of a Json format to make it more dynamic.
Example capture.