sarpay
5/5/2014 - 10:06 AM
[google] [map] [jscript] generate map with markers and infobox
[google] [map] [jscript] generate map with markers and infobox
<!--
marker tool: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
coordinate finder: http://www.geocodezip.com/v3_example_click2add_infowindow.html
-->
<!DOCTYPE html>
<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: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDLejPLbcu0sdfg345dfg456aJ-9E9s&sensor=false"></script>
<script src="infobox_packed.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function initialize() {
//*** merkez ofis
//var dest_1_Latitude = 40.97464506237596;
//var dest_1_Longitude = 29.101034613784805;
//*** depo
var dest_2_Latitude = 40.89873045733701; //old: 40.9077475077009;
var dest_2_Longitude = 29.224791526794434; //old: 29.214148732360854
//*** dolum tesisi
var dest_3_Latitude = 40.89556339721114;
var dest_3_Longitude = 29.261650654014602;
//*** merkez ofis (yeni)
// var dest_4_Latitude = 40.985867030989404;
// var dest_4_Longitude = 29.111532779869094;
//*** map center
var center_Latitude = 40.951381038421545;
var center_Longitude = 29.192390652832046;
//var dest_1_Location = new google.maps.LatLng(dest_1_Latitude,dest_1_Longitude);
var dest_2_Location = new google.maps.LatLng(dest_2_Latitude,dest_2_Longitude);
var dest_3_Location = new google.maps.LatLng(dest_3_Latitude,dest_3_Longitude);
// var dest_4_Location = new google.maps.LatLng(dest_4_Latitude,dest_4_Longitude);
var center_Location = new google.maps.LatLng(center_Latitude,center_Longitude);
//*** Map Settings
var mapOptions = {
center: center_Location, //changes dynamically if auto zoom script is executed
zoom: 11, //changes dynamically if auto zoom script is executed
scrollwheel: false,
streetViewControl: false,
navigationControl: true,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//*** Marker & Info Window Settings
var infoBoxText_Header = "<div style='";
infoBoxText_Header += "font-family: verdana, sans-serif;";
infoBoxText_Header += "font-size: 11px;";
infoBoxText_Header += "border: 1px solid #bbb;";
infoBoxText_Header += "margin-top: 0px;";
infoBoxText_Header += "background: #fcfcfc;";
infoBoxText_Header += "padding: 7px;";
infoBoxText_Header += "'>";
var infoBoxText_Footer = "</div>";
var infoBoxText;
//*** destination 4
// marker
// var markerOptions_dest_4_Location = {
// map: map,
// position: dest_4_Location,
// animation: google.maps.Animation.DROP,
// draggable: false,
// clickable: true,
// icon: 'home_red.png',/*#e81010*/
// title: ''
// };
// var marker_dest_4_Location = new google.maps.Marker(markerOptions_dest_4_Location);
// custom info window
// infoBoxText = infoBoxText_Header;
// infoBoxText += "MERKEZ OFİS<br />";
// infoBoxText += "Yenidoğan Cad. No:8<br />";
// infoBoxText += "Ataşehir / İSTANBUL<br />";
// infoBoxText += "34750";
// infoBoxText += infoBoxText_Footer;
// var infoBoxOptions_dest_4_Location = {
// content: infoBoxText
// ,disableAutoPan: false
// ,maxWidth: 0
// ,pixelOffset: new google.maps.Size(-82, 0)
// ,zIndex: null
// ,boxStyle: {
// //background: "url('images/tipbox_76.gif') no-repeat",
// opacity: 1.0
// ,width: "164px"
// }
// ,closeBoxMargin: "-1px 3px -1px 3px"
// ,closeBoxURL: "close.png"
// ,infoBoxClearance: new google.maps.Size(1, 1)
// ,isHidden: false
// ,pane: "floatPane"
// ,enableEventPropagation: false
// };
// var infoBox_dest_4_Location = new InfoBox(infoBoxOptions_dest_4_Location);
//*** uncomment to show infobox onLoad
//infoBox_dest_4_Location.open(map, marker_dest_4_Location);
// google.maps.event.addListener(marker_dest_4_Location, 'click', function() {
// infoBox_dest_4_Location.open(map,marker_dest_4_Location);
// });
//*** destination 1
// marker
//var markerOptions_dest_1_Location = {
// map: map,
// position: dest_1_Location,
// animation: google.maps.Animation.DROP,
// draggable: false,
// clickable: true,
// icon: 'home_red.png',
// title: ''
//};
//var marker_dest_1_Location = new google.maps.Marker(markerOptions_dest_1_Location);
// custom info window
//infoBoxText = infoBoxText_Header;
//infoBoxText += "MERKEZ OFİS<br />";
//infoBoxText += "Üsküdar İçerenköy Yolu Cad.,<br />"
//infoBoxText += "Bikeç Apt., No:4, D:7<br />"
//infoBoxText += "İçerenköy / İSTANBUL 34752"
//infoBoxText += infoBoxText_Footer;
//var infoBoxOptions_dest_1_Location = {
// content: infoBoxText
// ,disableAutoPan: false
// ,maxWidth: 0
// ,pixelOffset: new google.maps.Size(-110, 0)
// ,zIndex: null
// ,boxStyle: {
//background: "url('images/tipbox_76.gif') no-repeat",
// opacity: 1.0
// ,width: "220px"
// }
// ,closeBoxMargin: "-1px 3px -1px 3px"
// ,closeBoxURL: "close.png"
// ,infoBoxClearance: new google.maps.Size(1, 1)
// ,isHidden: false
// ,pane: "floatPane"
// ,enableEventPropagation: false
//};
//var infoBox_dest_1_Location = new InfoBox(infoBoxOptions_dest_1_Location);
//*** uncomment to show infobox onLoad
//infoBox_dest_1_Location.open(map, marker_dest_1_Location);
//google.maps.event.addListener(marker_dest_1_Location, 'click', function() {
// infoBox_dest_1_Location.open(map,marker_dest_1_Location);
//});
//*** uncomment to use the default InfoWindow method
//var infoWindow_dest_1_Location = new google.maps.InfoWindow({
// content: 'Refleks Ofis<br>Tel: 0216.469.1078<br>Fax: 0216.469.1079',
// pixelOffset: new google.maps.Size(-4, 37),
// maxWidth: 100
//});
//google.maps.event.addListener(marker_dest_1_Location, 'click', function() {
// infoWindow_dest_1_Location.open(map,marker_dest_1_Location);
//});
//*** destination 2
// marker
var markerOptions_dest_2_Location = {
map: map,
position: dest_2_Location,
animation: google.maps.Animation.DROP,
draggable: false,
clickable: true,
icon: 'home_red.png',/*#e81010*/
title: ''
};
var marker_dest_2_Location = new google.maps.Marker(markerOptions_dest_2_Location);
// custom info window
infoBoxText = infoBoxText_Header;
infoBoxText += "MERKEZ OFİS & DEPO<br />";
infoBoxText += "Cumhuriyet Mah.<br />";
infoBoxText += "Abdi İpekçi Cad.<br />";
infoBoxText += "Mermer Sokak, No:2<br />";
infoBoxText += "Kartal / İSTANBUL 34876";
infoBoxText += infoBoxText_Footer;
var infoBoxOptions_dest_2_Location = {
content: infoBoxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-92, 0)
,zIndex: null
,boxStyle: {
//background: "url('images/tipbox_76.gif') no-repeat",
opacity: 1.0
,width: "184px"
}
,closeBoxMargin: "-1px 3px -1px 3px"
,closeBoxURL: "close.png"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var infoBox_dest_2_Location = new InfoBox(infoBoxOptions_dest_2_Location);
//*** uncomment to show infobox onLoad
//infoBox_dest_2_Location.open(map, marker_dest_2_Location);
google.maps.event.addListener(marker_dest_2_Location, 'click', function() {
infoBox_dest_2_Location.open(map,marker_dest_2_Location);
});
//*** destination 3
// marker
var markerOptions_dest_3_Location = {
map: map,
position: dest_3_Location,
animation: google.maps.Animation.DROP,
draggable: false,
clickable: true,
icon: 'warehouse_red.png',/*#e81010*/
title: ''
};
var marker_dest_3_Location = new google.maps.Marker(markerOptions_dest_3_Location);
// custom info window
infoBoxText = infoBoxText_Header;
infoBoxText += "GAZLI SÖN. SİST.<br />";
infoBoxText += "DOLUM TESİSİ<br />";
infoBoxText += "Velibaba Sanayi Sitesi<br />";
infoBoxText += "Mimar Sinan Cad.<br />";
infoBoxText += "A3 Blok, No:19 ve 8<br />";
infoBoxText += "Pendik / İSTANBUL";
infoBoxText += infoBoxText_Footer;
var infoBoxOptions_dest_3_Location = {
content: infoBoxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-85, 0)
,zIndex: null
,boxStyle: {
//background: "url('images/tipbox_76.gif') no-repeat",
opacity: 1.0
,width: "170px"
}
,closeBoxMargin: "-1px 3px -1px 3px"
,closeBoxURL: "close.png"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var infoBox_dest_3_Location = new InfoBox(infoBoxOptions_dest_3_Location);
//*** uncomment to show infobox onLoad
//infoBox_dest_3_Location.open(map, marker_dest_3_Location);
google.maps.event.addListener(marker_dest_3_Location, 'click', function() {
infoBox_dest_3_Location.open(map,marker_dest_3_Location);
});
//*** Auto-Adjust Zoom to show all markers on the map
//var latlngbounds = new google.maps.LatLngBounds();
//latlngbounds.extend(dest_1_Location);
//latlngbounds.extend(dest_2_Location);
//latlngbounds.extend(dest_3_Location);
//latlngbounds.extend(dest_4_Location);
//map.fitBounds(latlngbounds);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 7(a){a=a||{};B.C.1E.1Z(2,2C);2.17=a.1m||"";2.1j=a.1h||16;2.14=a.1x||0;2.L=a.1q||11 B.C.1I(0,0);2.K=a.W||11 B.C.1H(0,0);2.T=a.U||F;2.1z=a.1y||{};2.1e=a.1g||"2S";2.R=a.1b||"2F://2B.B.2z/2v/2t/2q/1r.2l";4(a.1b===""){2.R=""}2.1a=a.1k||11 B.C.1I(1,1);2.V=a.1i||16;2.1F=a.25||"23";2.3=F;2.G=F;2.N=F}7.8=11 B.C.1E();7.8.1C=6(){5 a;4(!2.3){2.3=18.1Y("1X");2.1d();2.3.9.W="1W";2.3.9.S=\'1w\';4(2.T!==F){2.3.9.U=2.T}2.3.1v=2.1c()+2.17;2.2O()[2.1F].2H(2.3);2.1u();4(2.3.9.J){2.N=1t}Y{4(2.14!==0&&2.3.13>2.14){2.3.9.J=2.14;2.3.9.2w="2u";2.N=1t}Y{a=2.1M();2.3.9.J=(2.3.13-a.X-a.12)+"15";2.N=16}}2.1o(2.1j);B.C.H.Z(2,"2k")}};7.8.1c=6(){5 a="";4(2.R!==""){a="<2j";a+=" 2i=\'"+2.R+"\'";a+=" 2g=12";a+=" 9=\'";a+=" W: 2f;";a+=" 2c: 2b;";a+=" 2a: "+2.1e+";";a+="\'>"}Q a};7.8.1u=6(){5 a;4(2.R!==""){a=2.3.29;2.G=B.C.H.28(a,\'27\',2.1G())}Y{2.G=F}};7.8.1G=6(){5 a=2;Q 6(){a.1r();B.C.H.Z(a,"26")}};7.8.1o=6(A){4(!A){5 d=2.24();5 v=d.22();5 i=d.21();5 g=i.13;5 j=i.1D;5 b=v.20();5 h=b.M();5 r=b.O();5 o=h/g;5 s=r/j;5 t=v.1B().M();5 m=v.1A().M();5 e=v.1A().O();5 y=v.1B().O();5 a=2.K;5 u=2.L.J;5 w=2.L.1f;5 n=2.1a.J;5 p=2.1a.1f;5 z=a.M()+(u-n)*o;5 x=a.M()+(u+2.3.13+n)*o;5 k=a.O()-(w-p)*s;5 q=a.O()-(w+2.3.1D+p)*s;5 l=(z<t?t-z:0)+(x>m?m-x:0);5 f=(k>e?e-k:0)+(q<y?y-q:0);4(!(f===0&&l===0)){5 c=d.2R();d.2P(11 B.C.1H(c.O()-f,c.M()-l))}}};7.8.1d=6(){5 i;5 a=2.1z;2M(i 2K a){4(a.2G(i)){2.3.9[i]=a[i]}}4(E 2.3.9.1l!=="D"){2.3.9.2E="2D(1l="+(2.3.9.1l*2A)+")"}};7.8.1M=6(){5 c;5 a={19:0,1s:0,X:0,12:0};5 b=2.3;4(18.1n&&18.1n.1P){c=b.2y.1n.1P(b,"");4(c){a.19=I(c.1O,10)||0;a.1s=I(c.1N,10)||0;a.X=I(c.1L,10)||0;a.12=I(c.1Q,10)||0}}Y 4(18.2s.P){4(b.P){a.19=I(b.P.1O,10)||0;a.1s=I(b.P.1N,10)||0;a.X=I(b.P.1L,10)||0;a.12=I(b.P.1Q,10)||0}}Q a};7.8.2r=6(){4(2.3){2.3.2x.2p(2.3);2.3=F}};7.8.1p=6(){2.1C();5 a=2.2o().2n(2.K);2.3.9.X=(a.x+2.L.J)+"15";2.3.9.19=(a.y+2.L.1f)+"15";4(2.V){2.3.9.S=\'1w\'}Y{2.3.9.S="1K"}};7.8.2m=6(a){4(E a.1y!=="D"){2.1z=a.1y;2.1d()}4(E a.1m!=="D"){2.1J(a.1m)}4(E a.1h!=="D"){2.1j=a.1h}4(E a.1x!=="D"){2.14=a.1x}4(E a.1q!=="D"){2.L=a.1q}4(E a.W!=="D"){2.1V(a.W)}4(E a.U!=="D"){2.1U(a.U)}4(E a.1g!=="D"){2.1e=a.1g}4(E a.1b!=="D"){2.R=a.1b}4(E a.1k!=="D"){2.1a=a.1k}4(E a.1i!=="D"){2.V=a.1i}4(2.3){2.1p()}};7.8.1J=6(a){2.17=a;4(2.3){4(2.G){B.C.H.1S(2.G);2.G=F}4(!2.N){2.3.9.J=""}2.3.1v=2.1c()+a;4(!2.N){2.3.9.J=2.3.13+"15";2.3.1v=2.1c()+a}2.1u()}B.C.H.Z(2,"2I")};7.8.1V=6(a){2.K=a;4(2.3){2.1p()}B.C.H.Z(2,"2J")};7.8.1U=6(a){2.T=a;4(2.3){2.3.9.U=a}B.C.H.Z(2,"2h")};7.8.2L=6(){Q 2.17};7.8.1R=6(){Q 2.K};7.8.2N=6(){Q 2.T};7.8.2e=6(){2.V=16;2.3.9.S="1K"};7.8.2d=6(){2.V=1t;2.3.9.S="1w"};7.8.2Q=6(b,a){4(a){2.K=a.1R()}2.1T(b);4(2.3){2.1o()}};7.8.1r=6(){4(2.G){B.C.H.1S(2.G);2.G=F}2.1T(F)};',62,179,'||this|div_|if|var|function|InfoBox|prototype|style||||||||||||||||||||||||||||google|maps|undefined|typeof|null|closeListener_|event|parseInt|width|position_|pixelOffset_|lng|fixedWidthSet_|lat|currentStyle|return|closeBoxURL_|visibility|zIndex_|zIndex|isHidden_|position|left|else|trigger||new|right|offsetWidth|maxWidth_|px|false|content_|document|top|infoBoxClearance_|closeBoxURL|getCloseBoxImg_|setBoxStyle_|closeBoxMargin_|height|closeBoxMargin|disableAutoPan|isHidden|disableAutoPan_|infoBoxClearance|opacity|content|defaultView|panBox_|draw|pixelOffset|close|bottom|true|addClickHandler_|innerHTML|hidden|maxWidth|boxStyle|boxStyle_|getNorthEast|getSouthWest|createInfoBoxDiv_|offsetHeight|OverlayView|pane_|getCloseClickHandler_|LatLng|Size|setContent|visible|borderLeftWidth|getBoxWidths_|borderBottomWidth|borderTopWidth|getComputedStyle|borderRightWidth|getPosition|removeListener|setMap|setZIndex|setPosition|absolute|div|createElement|apply|toSpan|getDiv|getBounds|floatPane|getMap|pane|closeclick|click|addDomListener|firstChild|margin|pointer|cursor|hide|show|relative|align|zindex_changed|src|img|domready|gif|setOptions|fromLatLngToDivPixel|getProjection|removeChild|mapfiles|onRemove|documentElement|en_us|auto|intl|overflow|parentNode|ownerDocument|com|100|www|arguments|alpha|filter|http|hasOwnProperty|appendChild|content_changed|position_changed|in|getContent|for|getZIndex|getPanes|setCenter|open|getCenter|2px'.split('|'),0,{}))