1. get API key from google.com
All Maps API applications* should load the Maps API using an API key. Using an API key enables you to monitor your application’s Maps API usage, and ensures that Google can contact you about your application if necessary. If your application’s Maps API usage exceeds the Usage Limits, you must load the Maps API using an API key in order to purchase additional quota.
* Google Maps API for Business developers must not include a key in their requests. Please refer to Loading the Google Maps JavaScript API for Business-specific instructions.
To create your API key:
- Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
- Click the Services link from the left-hand menu.
- Activate the Google Maps API v3 service.
- Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use theKey for browser apps.
2. Download markerwithlabel.js
see this link https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerwithlabel/src/markerwithlabel.js?r=131
3. Code Behind
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 375px; width:578px }
</style>
<style type="text/css">
.labels {
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width:30px;
border: 2px solid black;
white-space: nowrap;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=[KEY_API_GOOGLE]&sensor=false">
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp;sensor=false"></script>
<script type="text/javascript" src="js/markerwithlabel.js"></script>
<script type="text/javascript">
function initialize() {
/*var mapOptions = {
center: new google.maps.LatLng(-6.210463, 106.780852),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
*/
<?php
$ct=$data->get_row("select * from tbl_gate order by gt_code");
?>
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(<?=$ct[gt_latitude]?>,<?=$ct[gt_longitude]?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
<?php
$gt=$data->get_rows("select * from tbl_gate order by gt_code");
$str='';
$j=1;
for($i=0;$i<count($gt);$i++){
$color='http://maps.google.com/mapfiles/ms/icons/red-dot.png';//"#FF0000";
$check=$data->get_value("select count(*) from tbl_gatelog where log_terminal='".$gt[$i][gt_code]."'
and log_date >= DATE_ADD(now(),interval -5 MINUTE)");
if($check>0)$color='http://maps.google.com/mapfiles/ms/icons/blue-dot.png';//"#0000FF";
$str.="['".$gt[$i][gt_code]."',".$gt[$i][gt_latitude].",".$gt[$i][gt_longitude].",'".$gt[$i][gt_name]."',".$j.",'".$color."'],";
$j++;
}
if($str!='')$str=rtrim($str,',');
?>
var locations = [
<?=$str?>
];
/*['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]*/
var i;
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatlng = new google.maps.LatLng(location[1], location[2]);
// To add the marker to the map, use the 'map' property
var marker = new MarkerWithLabel({
position: myLatlng,
map: map,
labelContent: location[0],
labelClass: "labels", // the CSS class for the label
labelAnchor: new google.maps.Point(15,0),
title:location[3],
zIndex: location[4],
icon: location[5]
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" />
</body>
</html>
Another icon you can see here:
http://maps.google.com/mapfiles/ms/icons/
POI.png
POI.shadow.png
arts.png
arts.shadow.png
bar.png
bar.shadow.png
blue-dot.png
blue-pushpin.png
blue.png
bus.png
bus.shadow.png
cabs.png
cabs.shadow.png
camera.png
camera.shadow.png
campfire.png
campfire.shadow.png
campground.png
campground.shadow.png
caution.png
caution.shadow.png
coffeehouse.png
coffeehouse.shadow.png
convienancestore.png
convienancestore.shadow.png
cycling.png
cycling.shadow.png
dollar.png
dollar.shadow.png
drinking_water.png
drinking_water.shadow.png
earthquake.png
earthquake.shadow.png
electronics.png
electronics.shadow.png
euro.png
euro.shadow.png
fallingrocks.png
fallingrocks.shadow.png
ferry.png
ferry.shadow.png
firedept.png
firedept.shadow.png
fishing.png
fishing.shadow.png
flag.png
flag.shadow.png
gas.png
gas.shadow.png
golfer.png
golfer.shadow.png
green-dot.png
green.png
grn-pushpin.png
grocerystore.png
grocerystore.shadow.png
groecerystore.png
groecerystore.shadow.png
helicopter.png
helicopter.shadow.png
hiker.png
hiker.shadow.png
homegardenbusiness.png
homegardenbusiness.shadow.png
horsebackriding.png
horsebackriding.shadow.png
hospitals.png
hospitals.shadow.png
hotsprings.png
hotsprings.shadow.png
info.png
info.shadow.png
info_circle.png
info_circle.shadow.png
landmarks-jp.png
landmarks-jp.shadow.png
lightblue.png
lodging.png
lodging.shadow.png
ltblu-pushpin.png
ltblue-dot.png
man.png
man.shadow.png
marina.png
marina.shadow.png
mechanic.png
mechanic.shadow.png
motorcycling.png
motorcycling.shadow.png
movies.png
movies.shadow.png
msmarker.shadow.png
orange-dot.png
orange.png
parkinglot.png
parkinglot.shadow.png
partly_cloudy.png
partly_cloudy.shadow.png
pharmacy-us.png
pharmacy-us.shadow.png
phone.png
phone.shadow.png
picnic.png
picnic.shadow.png
pink-dot.png
pink-pushpin.png
pink.png
plane.png
plane.shadow.png
police.png
police.shadow.png
postoffice-jp.png
postoffice-jp.shadow.png
postoffice-us.png
postoffice-us.shadow.png
purple-dot.png
purple-pushpin.png
purple.png
pushpin_shadow.png
question.png
question.shadow.png
rail.png
rail.shadow.png
rainy.png
rainy.shadow.png
rangerstation.png
rangerstation.shadow.png
realestate.png
realestate.shadow.png
recycle.png
recycle.shadow.png
red-dot.png
red-pushpin.png
red.png
restaurant.png
restaurant.shadow.png
sailing.png
sailing.shadow.png
salon.png
salon.shadow.png
shopping.png
shopping.shadow.png
ski.png
ski.shadow.png
snack_bar.png
snack_bar.shadow.png
snowflake_simple.png
snowflake_simple.shadow.png
sportvenue.png
sportvenue.shadow.png
subway.png
subway.shadow.png
sunny.png
sunny.shadow.png
swimming.png
swimming.shadow.png
toilets.png
toilets.shadow.png
trail.png
trail.shadow.png
tram.png
tram.shadow.png
tree.png
tree.shadow.png
truck.png
truck.shadow.png
volcano.png
volcano.shadow.png
water.png
water.shadow.png
waterfalls.png
waterfalls.shadow.png
webcam.png
webcam.shadow.png
wheel_chair_accessible.png
wheel_chair_accessible.shadow.png
woman.png
woman.shadow.png
yellow-dot.png
yellow.png
yen.png
yen.shadow.png
ylw-pushpin.png
berbagisolusi 
Discussion
No comments yet.