3 Replies - 2576 Views - Last Post: 22 August 2014 - 04:29 PM

#1 mutago234   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 259
  • Joined: 08-September 13

google map marker issues via Json and PHP

Posted 22 August 2014 - 04:06 PM

Am building a Google maps which gets information from database via JSON and php. Everything works fine. Now,

I want to replace Google red Marker icon with my own icon image in a database. how can i achieve that.

In my database i have 3 insert statements
Insert into into app values ('mutago','my name is mutago','images/icon1.png');
Insert into into app values ('mutago1','my name is mutago1','images/icon2.png');
Insert into into app values ('mutago2','my name is mutago2','images/icon3.png');

My question is how can i replace google marker with this icon1.png,icon2.png,icon3.png and use the as my maker.
Below is the entire code in JS.
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Google Maps Example</title>
        <style type="text/css">
            body { font: normal 14px Verdana; }
            h1 { font-size: 24px; }
            h2 { font-size: 18px; }
            #sidebar { float: right; width: 30%; }
            #main { padding-right: 15px; }
            .infoWindow { width: 220px; }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        //<![CDATA[
         
        var map;
         
        // Ban Jelačić Square - Center of Zagreb, Croatia
        var center = new google.maps.LatLng(45.812897, 15.97706);
         
        function init() {
             
            var mapOptions = {
                zoom: 13,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
             
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
             
            var marker = new google.maps.Marker({
             map: map,
               position: center,
            });
       }






        //]]>
        </script>


<script type="text/javascript">
function makeRequest(url, callback) {
    var request;
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
    } else {
        request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
    }
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            callback(request);
        }
    }
    request.open("GET", url, true);
    request.send();
}




var map;
 
// Ban Jelačić Square - City Center
var center = new google.maps.LatLng(45.812897, 15.97706);
 
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

function init() {
             
    var mapOptions = {
      zoom: 13,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
     
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
     
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions_panel'));
     
    // Detect user location
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
             
            var userLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
             
            geocoder.geocode( { 'latLng': userLocation }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    document.getElementById('start').value = results[0].formatted_address
                }
            });
             
        }, function() {
            alert('Geolocation is supported, but it failed');
        });
    }
     
    makeRequest('get_locations.php', function(data) {
         
        var data = JSON.parse(data.responseText);
        var selectBox = document.getElementById('destination');
         
        for (var i = 0; i < data.length; i++) {
            displayLocation(data[i]);
            addOption(selectBox, data[i]['name'], data[i]['address']);
        }
    });
}
 
function addOption(selectBox, text, value) {
    var option = document.createElement("OPTION");
    option.text = text;
    option.value = value;
    selectBox.options.add(option);
}





function displayLocation(location) {
         
    var content =   '<div class="infoWindow"><strong>'  + location.name + '</strong>'
                  + '<br/>'     + location.address
                    + '<br/>'     + location.description + '</div>';
     
    if (parseInt(location.lat) == 0) {
        geocoder.geocode( { 'address': location.address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {




 
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    title: location.name
                });
                 


                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(content);
                    infowindow.open(map,marker);
                });
            }
        });



    } else {
        var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon));
        var marker = new google.maps.Marker({
            map: map,
            position: position,
            title: location.name
        });
         
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(content);
            infowindow.open(map,marker);
        });
    }
}
</script>




    </head>


<body onload="init();">
         
    <h1>Places to check out in Zagreb</h1>
     
   
     
    <section id="sidebar">
        <div id="directions_panel"></div>
    </section>
     
    <section id="main">
        <div id="map_canvas" style="width: 70%; height: 500px;"></div>
    </section>
     
</body>











</html>

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: google map marker issues via Json and PHP

#2 andrewsw   User is offline

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6561
  • View blog
  • Posts: 26,600
  • Joined: 12-December 12

Re: google map marker issues via Json and PHP

Posted 22 August 2014 - 04:18 PM

So what exactly has this to do with VB6..?

Moved to Javascript. (After 150 posts you should be able to find the correct forum.)
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is offline

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6561
  • View blog
  • Posts: 26,600
  • Joined: 12-December 12

Re: google map marker issues via Json and PHP

Posted 22 August 2014 - 04:25 PM

Do you have code to retrieve the images from your database?

You also then need to explore the Google API to see how you would use your custom icons:

https://developers.g...rs#simple_icons

I would do this first, probably testing it with some icons I have lying around. (There's no point in extracting them from the database if you won't be able to use them on the map.)

Your question is about using the Google API. You need to research and attempt this yourself then, by all means, we can assist you if you are struggling.
Was This Post Helpful? 0
  • +
  • -

#4 mutago234   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 259
  • Joined: 08-September 13

Re: google map marker issues via Json and PHP

Posted 22 August 2014 - 04:29 PM

Yes below is the code that makes database call

<?php
     
    require 'config.php';
     
    try {
     
        $db = new PDO($dsn, $username, $password);
        $db->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
         
        $sth = $db->query("SELECT * FROM APP");
        $locations = $sth->fetchAll();
         
        echo json_encode( $locations );
         
    } catch (Exception $e) {
        echo $e->getMessage();
    }


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1