google map marker issues via Json and PHP

**mutago** · 08-22-2014, 10:53 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.

Code:

<!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>

**mutago** · 08-24-2014, 03:39 AM

my first question has been resolved. One more thing, I want to replace the dropdown select option with input type eg.. <input type=text> so that users can ignore dropdown database destination retrieval and hen manually typing the destination and then click on Get Direction Button . This issues lies here

Code:

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);
}

**Strangeplant** · 08-25-2014, 01:14 PM

I would suggest that you use something like this to find the element, remove all of the options, and add your new ones:

Code:

$(#destination) = myDropdown
myDropdown.empty();

Then, in your loop:

Code:

myDropdown.append('<option selected="selected" value="new_value">appropriate text</option>');

Of course, you would want to make only one "selected".....(see below).

Hope this helps.

Else, if you want to replace only some, you should know that the options/value pairs are stored in an array, so you could manipulate only one or several by referring to that element (number), as in:

Code:

$(#destination)=myDropdown;
myDropdown.options[number] = new Option("new_value", "some text");
myDropdown.options[number].selected = "true";  // or false, depending on if you want it selected or not. Default is false.

If you want to leave the first one and add the balance, then you can say:

Code:

$('#destination').find('option:not(:first)').remove();

This is done from memory, so I hope this will point you in the right direction.....

Thread: google map marker issues via Json and PHP

Thread Tools

Search Thread

google map marker issues via Json and PHP

jQuery Change Select Box Options

Similar Threads

update json value in mysql_row

Json Problem

Resolved array jSon

Best XML to JSON converter?

google issues?

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions