google map icon select type or icon image from mysql

sopranolv · July 27, 2016

Someone can help me make map script with multiply icons from sql by type or icon.

I have this

And I wont something as this

MYSQL

CREATE TABLE `poi_example` (
  `id` int(11) NOT NULL,
  `name` text NOT NULL,
  `desc` text NOT NULL,
  `lat` text NOT NULL,
  `lon` text NOT NULL,
  `expiry` varchar(15) NOT NULL,
  `type` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `poi_example`
--

INSERT INTO `poi_example` (`id`, `name`, `desc`, `lat`, `lon`, `expiry`, `type`) VALUES
(2, '93 Feet East', '150 Brick Lane, London  E1 6RU<br/>7 Dec 2010 : Jenny & Johnny<br/>', '51.521710', '-0.071737', '2016/07/28', 'green'),

PHP



       <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google Maps</title>
        <style type="text/css">
            body { font: normal 10pt Helvetica, Arial; }
            #map { width: 950px; height: 900px; border: 0px; padding: 0px; }
        </style>
        <script src="http://maps.google.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxx&sensor=false" type="text/javascript"></script>



        <script type="text/javascript">
        
        
        
            //Sample code written by August Li
            var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
                       new google.maps.Size(32, 32), new google.maps.Point(0, 0),
                       new google.maps.Point(16, 32));
            var center = null;
            var map = null;
            var currentPopup;
            var bounds = new google.maps.LatLngBounds();
            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
                });
                var popup = new google.maps.InfoWindow({
                    content: info,
                    maxWidth: 300
                });
                google.maps.event.addListener(marker, "click", function() {
                    if (currentPopup != null) {
                        currentPopup.close();
                        currentPopup = null;
                    }
                    popup.open(map, marker);
                    currentPopup = popup;
                });
                google.maps.event.addListener(popup, "closeclick", function() {
                    map.panTo(center);
                    currentPopup = null;
                });
            }           
            function initMap() {
                map = new google.maps.Map(document.getElementById("map"), {
                    center: new google.maps.LatLng(0, 0),
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                    },
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.ZOOM_PAN
                    }
                });
<?php
$query = mysql_query("SELECT * FROM poi_example")or die(mysql_error());
while($row = mysql_fetch_array($query))
{
  $name = $row['name'];
  $lat = $row['lat'];
  $lon = $row['lon'];
  $desc = $row['desc'];



  echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n");

}

?>
 center = bounds.getCenter();
     map.fitBounds(bounds);

     }
     </script>
     </head>
     <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
     <div id="map"></div>
     </body>
     </html>

Edited July 27, 2016 by sopranolv

cyberRobot · July 27, 2016

You could define all the icons you want to use, like what was done here:

var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
  new google.maps.Size(32, 32), new google.maps.Point(0, 0),
  new google.maps.Point(16, 32));

And then modify the addMarker() function to accept a new parameter to use when choosing the icon to display. The while loop which calls addMarker() would then be modified to say which icon to use.

Side note: the mysql_* functions have been removed from the newest version of PHP. You'll want to switch as soon as possible. More information can be found here:

http://php.net/manual/en/mysqlinfo.api.choosing.php

sopranolv · July 27, 2016

I dont know how to modify the addMarker() function

Sign In

google map icon select type or icon image from mysql

Recommended Posts

sopranolv

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

sopranolv

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information