Using .php MySQL to add custom .png markers to map

Question

I am using the following code to add markers to a map, it works fine, but I want to add another field to my database for the marker icon so I can display a custom marker icon for each entry in the database.

Does anyone know the what I need to "echo" in order to a custom .png marker for each item as it queries the database?

<?php

     $query = mysqli_query($conn, "SELECT * FROM table")or die(mysql_error());

     while($row = mysqli_fetch_array($query)) {
        $logo = $row['logo'];
        $company = $row['company'];
        $lat = $row['lat'];
        $lon = $row['lon'];
        $desc = $row['desc'];

        echo("addMarker($lat, $lon, '<b>$logo</b><b>$company<br />$desc');\n");
     }
?>

user7365852 · Accepted Answer · 2017-05-27 22:38:16Z

1

Add another field called "marker" to your table (perhaps with a default value of "marker.png" if you don't explicitly specify a custom marker for that row). Then, include the name of the custom marker in the JS that you're echoing out to the client:

`

 $query = mysqli_query($conn, "SELECT * FROM table")or die(mysql_error());

 while($row = mysqli_fetch_array($query)) {
    $logo = $row['logo'];
    $company = $row['company'];
    $lat = $row['lat'];
    $lon = $row['lon'];
    $marker = $row['marker'];
    $desc = $row['desc'];

    echo("addMarker($lat, $lon, $marker, '<b>$logo</b><b>$company<br />$desc');\n");
 }

?>`

Then in your addMarker() JS function, user $marker to write out an image tag on the map that displays the image.

answered May 27, 2017 at 22:38

user7365852

Sign up to request clarification or add additional context in comments.

4 Comments

user7365852 Over a year ago

In your addMarker() function, don't forget to prepend the URL path to the image to the name of the image. For example, if you're trying to display "Restaurant.png", and that image lives at yourdomain.com/markerimages/Restaurant.png, you need to prepend yourdomain.com/markerimages to the marker name you passed into addMarker()

user7365852 Over a year ago

Also, you might want to consider refactoring your code at some point so that your client-side script calls the server for the list of markers, and then the server returns the list as JSON that you iterate through to display the markers on your map. Writing out calls to JS functions from your server-side script has become frowned upon now that most web apps conform to the MVC design paradigm.

Rob Lischer Over a year ago

Since the $marker changes with every record, how will the function get called again with a new marker? My function looks like: <code> function addMarker(lat, lng, info) { var pt = new google.maps.LatLng(lat, lng); bounds.extend(pt); var marker = new google.maps.Marker({ position: pt, icon: icon, map: map }); </code>

user7365852 Over a year ago

Google provides an explanation of how to customize the marker icon here: developers.google.com/maps/documentation/javascript/…

Sakura Kinomoto · Accepted Answer · 2017-05-27 22:33:10Z

0

You need the full address of the image. For example, if you web are stored on www.example.com, on http protocol, you have these markers on images/markers folder, and you store the filename on the database, you can use this:

(Setting text on PHP while):

$icon = 'http://www.example.com/images/marker/' . $row['icon']; // Read a database row called icon with a filename, ex marker1.png After this, I understand your addMarker function call to google.maps.Marker() one, on these one, set a new param called icon and set on them the created $icon string.

Remember something: If you load your page on http, you can load marker on http or https. But if you load on https, you can get the marker image from a http resource.

answered May 27, 2017 at 22:33

Sakura Kinomoto

1,8822 gold badges22 silver badges32 bronze badges

4 Comments

Rob Lischer Over a year ago

My problem is not the image location, I just don't know how to echo the icon back. Somewhere in this line of code I need to add the icon info and nothing works: echo("addMarker($lat, $lon, '$logo$company $desc');\n");

Sakura Kinomoto Over a year ago

This function call to a function defined on a javascript file. If your problem is send it to google map, put $icon between lon and '<b.... then, search on your javascript files where's defined these function, and modify it to add icon parameter.

Rob Lischer Over a year ago

Does the $icon need the "img scr" ? It shows this: addMarker(27.2441, -80.8268, <img src="sample_icon.png">, '<img src="logo.png">Regions Bank ');

Sakura Kinomoto Over a year ago

No, you need to pass only the data I've detailed on my response.

Collectives™ on Stack Overflow

Using .php MySQL to add custom .png markers to map

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related