Place multiple custom marker icon on Google map

This example display a multiple custom marker in Google map using php and google map code.



<pre name="code">Php code</pre>
<?php
$address = array(
"Pizza Hut, Gr Flr, Solitaire Bldg 150 Feet, 150 Feet Ring Rd, Jagannath Plot, Rajkot",
"Civil Hospital, Hospital Chowk, Naval Nagar, Sadar, Rajkot ",
"Toran Limda Chowk, Opp Shastri Ground, Panchnath Plot, Sadar, Rajkot",
"N M Virani Wockhardt Hospital, Kalawad Road, Jala Ram Nagar, Rajkot"
);

$icon_name    = array("Restaurant","Hospital","Restaurant","Hospital");

$count   = count($address);
$i = 1;$j=0;

foreach ($address as $data) {
    if ($icon_name[$j] == "Hospital") {
        $img = 'http://maps.google.com/mapfiles/ms/icons/hospitals.png';
    } else {
        $img = 'http://maps.google.com/mapfiles/ms/icons/restaurant.png';
    }
    $geo = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address=' . urlencode($data) . '&sensor=false');

    $geo = json_decode($geo, true);

    if ($geo['status'] = 'OK') {
        $postion['lat'] = $geo['results'][0]['geometry']['location']['lat'];
        $postion['lng'] = $geo['results'][0]['geometry']['location']['lng'];
    }
 
    if ($i == 1) { ?>
    <script>
var locations = [<?php } ?>
["<?php echo $data; ?>", <?php echo $postion['lat']; ?>, <?php echo $postion['lng']; ?>, '<?php echo $img; ?>'],

    <?php if ($i == $count) { ?>];
        </script>

        <?php
    }
    $i++;$j++;
}
?>

<pre name="code">Js code</pre>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> 
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script>
    $(document).ready(function() {
        var map;
        var myOptions = {zoom: 13, center: new google.maps.LatLng(22.2734719, 70.7512556), mapTypeId: 'terrain'};

        map = new google.maps.Map($('#map_canvas')[0], myOptions);
     
     for (var x = 0; x < locations.length; x++) {

            var latlng = new google.maps.LatLng(locations[x][1], locations[x][2]);
            new google.maps.Marker({position: latlng, map: map, icon: locations[x][3]});
      
      }

    });
</script>

<div id="map_canvas" style="width:900px; height:800px"></div>

Comments

Popular posts from this blog

Bike/Scooter Transport via Indian Railway Procedure

Upgrade php version in xampp

Fraud buyer on OLX & Quicker, Please be safe before deal