Place multiple custom marker icon on Google map
This example display a multiple custom marker in Google map using php and google map code.
$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++;
}
?>
<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>
<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