Tem 16 2014

Google Map Api sini kullanmak. Javascript html kod örneği

https://developers.google.com/maps/documentation/javascript/examples/event-domListener

 

örnek kod aşağıdaki gibidir.

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta name=”robots” content=”noindex, nofollow”>
<link rel=”stylesheet” href=”stil.css” />
<meta name=”viewport”
content=”width=device-width, initial-scale=1.0, user-scalable=no”>
<meta charset=”UTF-8″>

<script language=”Javascript” type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=true”></script>

<script type=”text/javascript”>

/*
Global
*/
var map;

function initialize() {

/*
Basic Setup
*/

// var latLng = new google.maps.LatLng(40.704686,-74.011602);

var latLng = new google.maps.LatLng(38.9568857,35.2408826);

var myOptions = {
panControl: true,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
draggable: true,
disableDoubleClickZoom: true, //disable zooming
scrollwheel: true,
zoom: 7,
center: latLng,
mapTypeId: google.maps.MapTypeId.SATELLITE, // ROADMAP; SATELLITE; HYBRID; TERRAIN;
heading: 90,
tilt: 45,

};

map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);

/*
MARKER
*/

//for custom image
var image = ‘http://png-1.findicons.com/files/icons/2582/koloria/17/pin.png’;

var markerlatlng = new google.maps.LatLng(40.704686,-74.011602);

var locations = [
[‘Benim Mekanım gogole api denemem <small>Şişi /small>Lorem Ipsum dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.<br><img src=”https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRtEHbuHYMgqT6BYORPFn6Yw6jbBb8cQf8zwUYcImHwemmS8B9″ /> Lorem Ipsum adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500 lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960 larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.’, 41.0606859,28.9897868, 1],
];

var marker = new google.maps.Marker({
position: markerlatlng,
icon: image,
animation: google.maps.Animation.DROP,
title:”Neighborhood”
});

var marker, i;

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image,
animation: google.maps.Animation.DROP,
title:”Neighborhood”
});

google.maps.event.addListener(marker, ‘click’, (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

/*
INFO Bubble
*/

myInfoWindowOptions = {
content: ‘<div class=”info-window-content”>You can write anything you like here. You can even use <strong>heading</strong> tags here.</div>’,
maxWidth: 400
};

var infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(marker, ‘click’, function() {
infoWindow.open(map,marker);
});

google.maps.event.addListener(marker, ‘dragstart’, function(){
infoWindow.close();
});

infoWindow.open(map,marker);

}//end initialize

/*
onLoad
*/

$(function(){
initialize();
});
</script>
</head>
<body>
<!–Google Maps APIv3 Background–>
<div id=”canvas_holder”>
<div id=”map_canvas”></div>
</div>
<!– End Google Maps Background –>

</body>
</html>

çalışma çekli

 

 

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

By • Programlama - Software • 0 • Tags: , , ,