I want to change map icon as location condition

akashmanujaya

I want to change my map icon as location condition (value of locationCondition in the database column) in my website. but it shows only ELSE part (purple icon) icon only. please help me out to make this possible.
Here is my code
collectingStaff.php

<section id="Locations">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 text-center">
							<h2 class="section_header">
								Locations You have to Clean UP!
						</div>
					</div>
					<div class="row columns_margin_bottom_20" style="height: 600px" id="map">
							<!-- Add Google Map to the div-->
							<script>


								$(document).ready(function(){
								// $('#locs').append('<div>hello</div>');

						        /**
						         * Create new map
						         */
						        var infowindow;
						        var map;
						        var red_icon =  'http://maps.google.com/mapfiles/ms/icons/red-dot.png' ;
						        var purple_icon =  'http://maps.google.com/mapfiles/ms/icons/purple-dot.png' ;
						        var black_icon ='https://static.thenounproject.com/png/102874-200.png';
						        var locations = <?php get_confirmed_locations() ?>;
						        var myOptions = {
						            zoom: 11,
						            center: new google.maps.LatLng(6.8602, 80.0535),
						            mapTypeId: 'roadmap'
						        };
						        map = new google.maps.Map(document.getElementById('map'), myOptions);

						        /**
						         * Global marker object that holds all markers.
						         * @type {Object.<string, google.maps.LatLng>}
						         */
						        var markers = {};

						        /**
						         * Concatenates given lat and lng with an underscore and returns it.
						         * This id will be used as a key of marker to cache the marker in markers object.
						         * @param {!number} lat Latitude.
						         * @param {!number} lng Longitude.
						         * @return {string} Concatenated marker id.
						         */
						        var getMarkerUniqueId= function(lat, lng) {
						            return lat + '_' + lng;
						        };

						        /**
						         * Creates an instance of google.maps.LatLng by given lat and lng values and returns it.
						         * This function can be useful for getting new coordinates quickly.
						         * @param {!number} lat Latitude.
						         * @param {!number} lng Longitude.
						         * @return {google.maps.LatLng} An instance of google.maps.LatLng object
						         */
						        var getLatLng = function(lat, lng) {
						            return new google.maps.LatLng(lat, lng);
						        };

						        /**
						         * loop through (Mysql) dynamic locations to add markers to map.
						         */
						        var i ; var confirmed = 0;
						        for (i = 0; i < locations.length; i++) {

						        	

						            marker = new google.maps.Marker({
						                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
						                map: map,
						                icon :   locations[i][6] === '3' ?  black_icon  : purple_icon,
						                html: "<div>\n" +
						                "<table class=\"map1\">\n" +
						                "<tr>\n" +
						                "<td><a>Description:</a></td>\n" +
						                "<td><textarea disabled id='manual_description' placeholder='Description'>"+locations[i][3]+"</textarea></td></tr>\n" +
						                 "<td><a>Image:</a></td>\n" +
						                "<td><img src="+locations[i][4]+" style='width: 250px; height: auto;'></td></tr>\n" +
						                "</table>\n" +
						                "</div>"
						            });

								     //       // ajax call get data from server and append to the div
								     //       $('#locs').append('\
						       //      		<div class="row">\
				    					// 		<div class="col-md-12" id="'+ locations[i][0] +'" style="-webkit-box-shadow: 0 4px 6px -6px #222;-moz-box-shadow: 0 4px 6px -6px #222;box-shadow: 0 4px 6px -6px #222;margin:0;">\
					    				// 			<div style="display: table-cell;">\
					    				// 				<img src="../'+ locations[i][4] +'" style="width: 100px; height: auto; margin-bottom:20px;margin-top:20px">\
					    				// 			</div>\
					    				// 			<div style="display: table-cell; vertical-align: top; padding-left: 10px;padding-top:20px">\
													// 	<div style="word-wrap: break-word;font-size:14px">'+locations[i][3]+'</div>\
													// </div>\
				    					// 		</div>\
				    					// 	</div>\
						       //      	');
								    


						            


									
						            google.maps.event.addListener(marker, 'click', (function(marker, i) {
						                return function() {
						                    infowindow = new google.maps.InfoWindow();
						                    confirmed =  locations[i][4] === '1' ?  'checked'  :  0;
						                    $("#confirmed").prop(confirmed,locations[i][4]);
						                    $("#id").val(locations[i][0]);
						                    $("#description").val(locations[i][3]);
						                    $("#image").val(locations[i][4]);
						                    $("#form").show();
						                    infowindow.setContent(marker.html);
						                    infowindow.open(map, marker);

						                    
						                    //reseting highlight
						         //            for (j = 0; j < locations.length; j++) {
				           //          	 		$("#"+ locations[j][0]).css("background-color", "transparent");


						         //            }

						         //            $("#"+ locations[i][0]).css("background-color", "#ff0000");

					          //           	 $('#locs').animate({
											    //     scrollTop: $("#" + locations[i][0]).offset().top
											    // }, 2000);

						     //                $("#"+ locations[i][0]).click(function() {

											//   	var x = window.scrollX, y = window.scrollY;
											//   	elem.focus();
											//   	window.scrollTo(x, y);
											// });

						       
						                }
						            })(marker, i));
						        }
						        });

								// // Initialize and add the map
								// function initMap() {
  								// 			// The location of Uluru
  								// 			var uluru = {lat: -25.344, lng: 131.036};

  								// 			// The map, centered at Uluru
  								// 			var map = new google.maps.Map(
      							// 										document.getElementById('map'), {zoom: 1, center: uluru}
								// 				);

  								// 			// The marker, positioned at Uluru
  								// 			var marker = new google.maps.Marker({position: uluru, map: map});
								// }
   							</script>

   							<!--Apply API key for Google Map-->
    						<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?language=en&key=AIzaSyCbNfrYitHIsUd-UOQmRw0cDs7Y76vswv4">
    						</script>

    					
					</div>
				</div>
			</section>

location_model.php

<?php
require("db.php");

// Gets data from URL parameters.
if(isset($_GET['add_location'])) {
    add_location();
}
if(isset($_GET['confirm_location'])) {
    confirm_location();
}



function add_location(){
    $con=mysqli_connect ("localhost", 'root', '','demo');
    if (!$con) {
        die('Not connected : ' . mysqli_connect_error());
    }
    $lat = $_GET['lat'];
    $lng = $_GET['lng'];
    $description =$_GET['description'];
    $image=$_GET['image'];
    // Inserts new row with place data.
    $query = sprintf("INSERT INTO locations " .
        " (id, lat, lng, description,image) " .
        " VALUES (NULL, '%s', '%s', '%s','%s');",
        mysqli_real_escape_string($con,$lat),
        mysqli_real_escape_string($con,$lng),
        mysqli_real_escape_string($con,$description),
        mysqli_real_escape_string($con,$image));

    $result = mysqli_query($con,$query);
    echo"Inserted Successfully";
    if (!$result) {
        die('Invalid query: ' . mysqli_error($con));
    }
}
function confirm_location(){
    $con=mysqli_connect ("localhost", 'root', '','demo');
    if (!$con) {
        die('Not connected : ' . mysqli_connect_error());
    }
    $id =$_GET['id'];
    $confirmed =$_GET['confirmed'];
    // update location with confirm if admin confirm.
    $query = "update locations set location_status = $confirmed WHERE id = $id ";
    $result = mysqli_query($con,$query);
    echo "Inserted Successfully";
    if (!$result) {
        die('Invalid query: ' . mysqli_error($con));
    }
}

//Gettin Confirmed Locatons
function get_confirmed_locations()
{
    $con=mysqli_connect ("localhost", 'root', '','demo');
    if (!$con) 
    {
        die('Not connected : ' . mysqli_connect_error());
    }

    // update location with location_status if admin location_status.
    $sqldata = mysqli_query($con,"select id ,lat,lng,description,image,location_status as isconfirmed,locationCondition from locations WHERE  location_status = 1
  ");

    $rows = array();

    while($r = mysqli_fetch_assoc($sqldata)) {
        $rows[] = $r;

    }

    $indexed = array_map('array_values', $rows);
    //  $array = array_filter($indexed);

    echo json_encode($indexed);
    if (!$rows) {
        return null;
    }
}


function get_all_locations(){
    $con=mysqli_connect ("localhost", 'root', '','demo');
    if (!$con) {
        die('Not connected : ' . mysqli_connect_error());
    }
    // update location with location_status if admin location_status.
    $sqldata = mysqli_query($con,"
select id ,lat,lng,description,image,location_status as isconfirmed
from locations
  ");

    $rows = array();
    while($r = mysqli_fetch_assoc($sqldata)) {
        $rows[] = $r;

    }
  $indexed = array_map('array_values', $rows);
  //  $array = array_filter($indexed);

    echo json_encode($indexed);
    if (!$rows) {
        return null;
    }
}
function array_flatten($array) {
    if (!is_array($array)) {
        return FALSE;
    }
    $result = array();
    foreach ($array as $key => $value) {
        if (is_array($value)) {
            $result = array_merge($result, array_flatten($value));
        }
        else {
            $result[$key] = $value;
        }
    }
    return $result;
}

?>

fern

try

icon :   locations[i][6] === 3 ?  black_icon  : purple_icon,

akashmanujaya

@fern Not Working

dev_lak

try

icon :   locations[i][6] == 3 ?  black_icon  : purple_icon,

akashmanujaya

@dev_lak not working mchn

akashmanujaya

@dev_lak It worked perfectly .. Thankz for your massive help :v: :kissing:

dev_lak

@akashmanujaya welcome bro...

I want to change map icon as location condition

0
Online

2.8k
Users

1.2k
Topics

5.2k
Posts

I want to change map icon as location condition

0Online

2.8kUsers

1.2kTopics

5.2kPosts

0
Online

2.8k
Users

1.2k
Topics

5.2k
Posts