8/18/2019 Google Map 2

1/21

      Google Maps JavaScript API Example     

var IMAGES = [ "car_000.PNG", "car_045.PNG", "car_090.PNG", "car_135.PNG", "car_180.PNG", "car_225.PNG", "car_270.PNG", "car_315.PNG" ];

var m_x = 0;var m_y = 0;var m_x2 = 0;

var m_y2 = 0;var m_x3 = 0;var m_y3 = 0;var m_x4 = 0;var m_y4 = 0;var m_x5 = 0;var m_y5 = 0;var polyline1 = [];var polyline2 = [];var polyline3 = [];var polyline4 = [];var polyline5 = [];var p1 = 0;

var p2 = 0;var p3 = 0;var p4 = 0;var p5 = 0;var marker1 = [];var marker2 = [];var marker3 = [];var marker4 = [];var marker5 = [];var carmarker = null;var icons = [];var centericon = null;

var routeLine;

  function GM_load(){

try{

  if (GBrowserIsCompatible()) {map = new GMap2(document.getElementById("map_can

vas"));map.addControl(new GLargeMapControl3D());//GSmal

lZoomControl());//GLargeMapControl3D());//GSmallZoomControl());//GSmallMapControl());

map.setCenter(new GLatLng(37.4419, -122.1419), 14);

map.enableScrollWheelZoom();

8/18/2019 Google Map 2

2/21

map.disableDoubleClickZoom();map.addMapType(G_PHYSICAL_MAP);

var mapControl = new GHierarchicalMapTypeControl();

mapControl.clearRelationships();mapControl.addRelationship(G_SATELLITE_MAP, G_HY

BRID_MAP, "Labels", true);map.addControl(mapControl);

centericon = new GIcon();centericon.image = "car_location2.png";centericon.iconSize = new GSize(30, 30);centericon.iconAnchor = new GPoint(15, 15);

GEvent.addListener(map, "dblclick",function(overlay,latlng) {

if (latlng) {var myHtml = "__" + latl

ng.x + "_" + latlng.y; document.title = myHtml;}

});

}}catch(e){}

  }

function initicon(path)

{}

function setpin(x, y){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");  }

else  {  //alert("error");  return;  }

  //map.setCenter(new google.maps.LatLng(x, y));  vehicleMarker.setPosition(new google.maps.LatLng(x, y)); 

/*try{

if(carmarker != null) map.removeOverlay(carmarker);

carmarker = new GMarker(new GLatLng(x, y), {icon : centericon});

map.addOverlay(carmarker);}catch(e)

8/18/2019 Google Map 2

3/21

{}*/

}

function clearOvr1(){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");  }

else  {  //alert("error");  return;  }

try{

m_x = 0;

m_y = 0;m_x2 = 0;m_y2 = 0;m_x3 = 0;m_y3 = 0;m_x4 = 0;m_y4 = 0;m_x5 = 0;m_y5 = 0;if(marker1 != null) map.removeOverlay(marker1);for(var i = 0; i < p1 ; i++){

map.removeOverlay(polyline1[i]);

}polyline1.length = 0;p1 = 0;

}catch(e){}

}function clearOvr2(){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");  }

else  {  //alert("error");  return;  }

try{

m_x = 0;m_y = 0;m_x2 = 0;m_y2 = 0;

m_x3 = 0;m_y3 = 0;m_x4 = 0;

8/18/2019 Google Map 2

4/21

m_y4 = 0;m_x5 = 0;m_y5 = 0;if(marker2 != null) map.removeOverlay(marker2);for(var i = 0; i < p2 ; i++){

map.removeOverlay(polyline2[i]);

}polyline2.length = 0;p2 = 0;

}catch(e){}

}function clearOvr3(){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");  }else

  {  //alert("error");  return;  }

try{

m_x = 0;m_y = 0;m_x2 = 0;m_y2 = 0;

m_x3 = 0;m_y3 = 0;m_x4 = 0;m_y4 = 0;m_x5 = 0;m_y5 = 0;if(marker3 != null) map.removeOverlay(marker3);for(var i = 0; i < p3 ; i++){

map.removeOverlay(polyline3[i]);}polyline3.length = 0;p3 = 0;

}catch(e){}

}function clearOvr4(){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");  }

else

  {  //alert("error");  return;

8/18/2019 Google Map 2

5/21

  }try{

m_x = 0;m_y = 0;m_x2 = 0;m_y2 = 0;

m_x3 = 0;m_y3 = 0;m_x4 = 0;m_y4 = 0;m_x5 = 0;m_y5 = 0;if(marker4 != null) map.removeOverlay(marker4);for(var i = 0; i < p4 ; i++){

map.removeOverlay(polyline4[i]);}polyline4.length = 0;

p4 = 0;}catch(e){}

}function clearOvr5(){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");  }

else

  {  //alert("error");  return;  }

try{

m_x = 0;m_y = 0;m_x2 = 0;m_y2 = 0;m_x3 = 0;m_y3 = 0;m_x4 = 0;m_y4 = 0;m_x5 = 0;m_y5 = 0;if(marker5 != null) map.removeOverlay(marker5);for(var i = 0; i < p5 ; i++){

map.removeOverlay(polyline5[i]);}polyline5.length = 0;p5 = 0;

}catch(e)

{}

}

8/18/2019 Google Map 2

6/21

function clearOvr(){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");  }

else  {  //alert("error");  return;  }

try{  //alert("clearOvr");

m_x = 0;m_y = 0;m_x2 = 0;

m_y2 = 0;m_x3 = 0;m_y3 = 0;m_x4 = 0;m_y4 = 0;m_x5 = 0;m_y5 = 0;

var p_size1 = polyline1.lengthfor(i=0; i

8/18/2019 Google Map 2

7/21

}

polyline1.length = 0;polyline2.length = 0;polyline3.length = 0;polyline4.length = 0;polyline5.length = 0;

var p1 = 0;var p2 = 0;var p3 = 0;var p4 = 0;var p5 = 0;

if(marker1 != null)marker1.setMap(null);

if(marker2 != null)marker2.setMap(null);

if(marker3 != null)marker3.setMap(null);

if(marker4 != null)marker4.setMap(null);if(marker5 != null)

marker5.setMap(null);

//map.clearOverlays();}catch(e){}

}function SetCenter(x, y){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");  }

else  {  //alert("error");  return;  }  map.setCenter(new google.maps.LatLng(x, y)); 

//var routeLineArr = routeLine.getPath();  //routeLineArr.push(new google.maps.LatLng(x, y)); 

/*try{

map.setCenter(new GLatLng(x,y), map.getZoom());}catch(e){}*/

}

function SetCenter2(x, y, c){

  if (typeof google === 'object' && typeof google.maps === 'object')

8/18/2019 Google Map 2

8/21

  {  //alert("google");  }

else  {  //alert("error");  return;

  }  //map.setCenter(new google.maps.LatLng(x, y));

try{

if(c == 0){

/*if(marker1 != null)map.removeOverlay(marker1);

 var redIcon = new GIcon();

redIcon.image = "http://maps.google.com/mapfiles/ms/icons/red-pushpin.png";redIcon.shadow = null;redIcon.iconSize = new GSize(32, 32);redIcon.shadowSize = new GSize(0, 0);redIcon.iconAnchor = new GPoint(10, 32);redIcon.removemarkerOptions = { icon:redIcon };marker = new GMarker(new GLatLng(x, y), markerOp

tions );

GEvent.addListener(marker1, "dblclick",function()

{document.title = "__marker1";

});map.setCenter(new GLatLng(x,y), map.getZoom());map.addOverlay(marker);

  */ 

//if(marker1 != null)// marker1.setMap(null);

 

var marker_image = new google.maps.MarkerImage(  // url:  "https://reader009.{domain}/reader009/html5/0724/5b5712c86ace1/5b5712cb474be.png",  // size:  new google.maps.Size(36, 36),  // origin:  new google.maps.Point(0, 0),  // anchor:  new google.maps.Point(8, 16),  // set scaledSize:  new google.maps.Size(32, 32));

 var myLatLng = new google.maps.LatLng(x, y);

  //var beachMarker = new google.maps.Marker({  marker1 = new google.maps.Marker({  position: myLatLng,

8/18/2019 Google Map 2

9/21

8/18/2019 Google Map 2

10/21

}else if(c == 2){  /*

if(marker3 != null)map.removeOverlay(marker3);

 

var redIcon = new GIcon();redIcon.image = "http://maps.google.com/mapfiles

/ms/icons/blue-pushpin.png";redIcon.shadow = null;redIcon.iconSize = new GSize(32, 32);redIcon.shadowSize = new GSize(0, 0);redIcon.iconAnchor = new GPoint(10, 32);redIcon.removemarkerOptions = { icon:redIcon };marker3 = new GMarker(new GLatLng(x, y), markerO

ptions );map.addOverlay(marker3);

GEvent.addListener(marker3, "dblclick",function(){

document.title = "__marker3";}

);*/

//if(marker3 != null)// marker3.setMap(null);

  var marker_image = new google.maps.MarkerImage(

  // url:  "https://reader009.{domain}/reader009/html5/0724/5b5712c86ace1/5b5712cc261d4.png",  // size:  new google.maps.Size(36, 36),  // origin:  new google.maps.Point(0, 0),  // anchor:  new google.maps.Point(8, 16),  // set scaledSize:  new google.maps.Size(32, 32));

 var myLatLng = new google.maps.LatLng(x, y);

  //var beachMarker = new google.maps.Marker({  marker3 = new google.maps.Marker({  position: myLatLng,  map: map  }); 

marker3.setIcon(marker_image);  marker3.setMap(map);

//map.setCenter(new google.maps.LatLng(x, y));}else if(c == 3){  /*

if(marker4 != null)map.removeOverlay(marker4);

 

8/18/2019 Google Map 2

11/21

var redIcon = new GIcon();redIcon.image = "http://maps.google.com/mapfiles

/ms/icons/blue-pushpin.png";redIcon.shadow = null;redIcon.iconSize = new GSize(32, 32);redIcon.shadowSize = new GSize(0, 0);redIcon.iconAnchor = new GPoint(10, 32);

redIcon.removemarkerOptions = { icon:redIcon };marker4 = new GMarker(new GLatLng(x, y), markerO

ptions );addOverlay(marker4);

GEvent.addListener(marker4, "dblclick",function(){

document.title = "__marker4";}

);

*/

//if(marker4 != null)// marker4.setMap(null);

  var marker_image = new google.maps.MarkerImage(  // url:  "https://reader009.{domain}/reader009/html5/0724/5b5712c86ace1/5b5712cc68b6f.png",  // size:  new google.maps.Size(36, 36),  // origin:  new google.maps.Point(0, 0),  // anchor:

  new google.maps.Point(8, 16),  // set scaledSize:  new google.maps.Size(32, 32));

 var myLatLng = new google.maps.LatLng(x, y);

  //var beachMarker = new google.maps.Marker({  marker4 = new google.maps.Marker({  position: myLatLng,  map: map  }); 

marker4.setIcon(marker_image);  marker4.setMap(map);

//map.setCenter(new google.maps.LatLng(x, y));

}else if(c == 4){  /*

if(marker5 != null)map.removeOverlay(marker5);

var redIcon = new GIcon();redIcon.image = "http://maps.google.com/mapfiles

/ms/icons/blue-pushpin.png";

redIcon.shadow = null;redIcon.iconSize = new GSize(32, 32);redIcon.shadowSize = new GSize(0, 0);

8/18/2019 Google Map 2

12/21

redIcon.iconAnchor = new GPoint(10, 32);redIcon.removemarkerOptions = { icon:redIcon };marker5 = new GMarker(new GLatLng(x, y), markerO

ptions );map.addOverlay(marker5);

GEvent.addListener(marker5, "dblclick",function(){

document.title = "__marker5";}

);*/

//if(marker5 != null)// marker5.setMap(null);

  var marker_image = new google.maps.MarkerImage(

  // url:  "https://reader009.{domain}/reader009/html5/0724/5b5712c86ace1/5b5712cca682c.png",  // size:  new google.maps.Size(36, 36),  // origin:  new google.maps.Point(0, 0),  // anchor:  new google.maps.Point(8, 16),  // set scaledSize:  new google.maps.Size(32, 32));

 var myLatLng = new google.maps.LatLng(x, y);

  //var beachMarker = new google.maps.Marker({

  marker5 = new google.maps.Marker({  position: myLatLng,  map: map  }); 

marker5.setIcon(marker_image);  marker5.setMap(map);

//map.setCenter(new google.maps.LatLng(x, y));

}}catch(e){}

}

function SetCenter3(x, y, c){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");  }

else  {  //alert("error");

  return;  }

  map.setCenter(new google.maps.LatLng(x, y));

8/18/2019 Google Map 2

13/21

try{

if(c == 0){

if(marker != null)map.removeOverlay(marker);

var redIcon = new GIcon();redIcon.image = "http://maps.google.com/mapfiles

/ms/icons/red-pushpin.png";redIcon.shadow = null;redIcon.iconSize = new GSize(32, 32);redIcon.shadowSize = new GSize(0, 0);redIcon.iconAnchor = new GPoint(10, 32);redIcon.removemarkerOptions = { icon:redIcon };

marker = new GMarker(new GLatLng(x, y), markerOptions );

map.addOverlay(marker);

GEvent.addListener(marker, "dblclick",function(){

document.title = "__marker1";}

); 

map.setCenter(new GLatLng(x,y), map.getZoom());}else if(c == 1){

if(marker2 != null)map.removeOverlay(marker2);

var redIcon = new GIcon();redIcon.image = "http://maps.google.com/mapfiles

/ms/icons/blue-pushpin.png";redIcon.shadow = null;redIcon.iconSize = new GSize(32, 32);redIcon.shadowSize = new GSize(0, 0);redIcon.iconAnchor = new GPoint(10, 32);redIcon.removemarkerOptions = { icon:redIcon };marker2 = new GMarker(new GLatLng(x, y), markerO

ptions );map.addOverlay(marker2);

GEvent.addListener(marker2, "dblclick",function(){

document.title = "__marker2";}

);}else if(c == 2){

if(marker3 != null)

map.removeOverlay(marker3);var redIcon = new GIcon();redIcon.image = "http://maps.google.com/mapfiles

8/18/2019 Google Map 2

14/21

/ms/icons/blue-pushpin.png";redIcon.shadow = null;redIcon.iconSize = new GSize(32, 32);redIcon.shadowSize = new GSize(0, 0);redIcon.iconAnchor = new GPoint(10, 32);redIcon.removemarkerOptions = { icon:redIcon };

marker3 = new GMarker(new GLatLng(x, y), markerOptions );

map.addOverlay(marker3);

GEvent.addListener(marker3, "dblclick",function(){

document.title = "__marker3";}

);}else if(c == 3)

{ if(marker4 != null)map.removeOverlay(marker4);

var redIcon = new GIcon();redIcon.image = "http://maps.google.com/mapfiles

/ms/icons/blue-pushpin.png";redIcon.shadow = null;redIcon.iconSize = new GSize(32, 32);redIcon.shadowSize = new GSize(0, 0);redIcon.iconAnchor = new GPoint(10, 32);redIcon.removemarkerOptions = { icon:redIcon };marker4 = new GMarker(new GLatLng(x, y), markerO

ptions );map.addOverlay(marker4);

GEvent.addListener(marker4, "dblclick",function(){

document.title = "__marker4";}

);}else if(c == 4){

if(marker5 != null)map.removeOverlay(marker5);

var redIcon = new GIcon();redIcon.image = "http://maps.google.com/mapfiles

/ms/icons/blue-pushpin.png";redIcon.shadow = null;redIcon.iconSize = new GSize(32, 32);redIcon.shadowSize = new GSize(0, 0);redIcon.iconAnchor = new GPoint(10, 32);redIcon.removemarkerOptions = { icon:redIcon };marker5 = new GMarker(new GLatLng(x, y), markerO

ptions );

map.addOverlay(marker5);

GEvent.addListener(marker5, "dblclick",

8/18/2019 Google Map 2

15/21

function(){

document.title = "__marker5";}

);}

}

catch(e){}

}

function move1(x, y, c){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");  }

else

  {  //alert("error");  return;  }

try{

if(m_x != 0){  /*

var polyline = new GPolyline([new GLatLng(m_x, m_y),new GLatLng(x, y)

],c, 4);map.addOverlay(polyline);polyline1.push(polyline);p1 = p1 + 1;*/

var polylinePath= [];var tmp_lat_lng1 = new google.maps.LatLng( m_x,

m_y);var tmp_lat_lng2 = new google.maps.LatLng( x, y)

;  polylinePath.push(tmp_lat_lng1);  polylinePath.push(tmp_lat_lng2);  var polyline = new google.maps.Polyline({  path: polylinePath,  //strokeColor: "#FF0000",  strokeColor: c,  strokeOpacity: 1.0,  strokeWeight: 5  });  polyline.setMap(map)  polyline1.push(polyline);  p1 = p1 + 1;

}

m_x = x;m_y = y;

}

8/18/2019 Google Map 2

16/21

catch(e){}

}function move2(x, y, c){

  if (typeof google === 'object' && typeof google.maps === 'object')

{  //alert("google");  }

else  {  //alert("error");  return;  }

try{

if(m_x2 != 0){

  /* var polyline = new GPolyline([new GLatLng(m_x2, m_y2),new GLatLng(x, y)

],c, 4);map.addOverlay(polyline);polyline2.push(polyline);p2 = p2 + 1;*/

var polylinePath= [];

var tmp_lat_lng1 = new google.maps.LatLng( m_x2, m_y2);

var tmp_lat_lng2 = new google.maps.LatLng( x, y);  polylinePath.push(tmp_lat_lng1);  polylinePath.push(tmp_lat_lng2);  var polyline = new google.maps.Polyline({  path: polylinePath,  strokeColor: c,  strokeOpacity: 1.0,  strokeWeight: 5  });  polyline.setMap(map)  polyline2.push(polyline);  p2 = p2 + 1;

}m_x2 = x;m_y2 = y;

}catch(e){}

}function move3(x, y, c){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");

8/18/2019 Google Map 2

17/21

  }else

  {  //alert("error");  return;  }

try

{if(m_x3 != 0){  /*

var polyline = new GPolyline([new GLatLng(m_x3, m_y3),new GLatLng(x, y)

],c, 4);map.addOverlay(polyline);polyline3.push(polyline);

p3 = p3 + 1;*/

var polylinePath= [];var tmp_lat_lng1 = new google.maps.LatLng( m_x3,

 m_y3);var tmp_lat_lng2 = new google.maps.LatLng( x, y)

;  polylinePath.push(tmp_lat_lng1);  polylinePath.push(tmp_lat_lng2);  var polyline = new google.maps.Polyline({  path: polylinePath,  strokeColor: c,

  strokeOpacity: 1.0,  strokeWeight: 5  });  polyline.setMap(map)  polyline3.push(polyline);  p3 = p3 + 1;

}m_x3 = x;m_y3 = y;

}catch(e){}

}function move4(x, y, c){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");  }

else  {  //alert("error");  return;  }

try{

if(m_x4 != 0)

8/18/2019 Google Map 2

18/21

{  /*

var polyline = new GPolyline([new GLatLng(m_x4, m_y4),new GLatLng(x, y)

],

c, 4);map.addOverlay(polyline);polyline4.push(polyline);p4 = p4 + 1;*/

var polylinePath= [];var tmp_lat_lng1 = new google.maps.LatLng( m_x4,

 m_y4);var tmp_lat_lng2 = new google.maps.LatLng( x, y)

;  polylinePath.push(tmp_lat_lng1);

  polylinePath.push(tmp_lat_lng2);  var polyline = new google.maps.Polyline({  path: polylinePath,  strokeColor: c,  strokeOpacity: 1.0,  strokeWeight: 5  });  polyline.setMap(map)  polyline4.push(polyline);  p4 = p4 + 1;

}m_x4 = x;m_y4 = y;

}catch(e){}

}function move5(x, y, c){

  if (typeof google === 'object' && typeof google.maps === 'object'){

  //alert("google");  }

else  {  //alert("error");  return;  }

try{

if(m_x5 != 0){  /*

var polyline = new GPolyline([new GLatLng(m_x5, m_y5),new GLatLng(x, y)

],c, 4);map.addOverlay(polyline);

8/18/2019 Google Map 2

19/21

polyline5.push(polyline);p5 = p5 + 1;*/

var polylinePath= [];var tmp_lat_lng1 = new google.maps.LatLng( m_x5,

 m_y5);

var tmp_lat_lng2 = new google.maps.LatLng( x, y);  polylinePath.push(tmp_lat_lng1);  polylinePath.push(tmp_lat_lng2);  var polyline = new google.maps.Polyline({  path: polylinePath,  strokeColor: c,  strokeOpacity: 1.0,  strokeWeight: 5  });  polyline.setMap(map)  polyline5.push(polyline);

  p5 = p5 + 1; }m_x5 = x;m_y5 = y;

}catch(e){}

}

function setcanvassize(x, y){

  if (typeof google === 'object' && typeof google.maps === 'object')

{  //alert("google");  }

else  {  //alert("error");  return;  }

try{

document.getElementById("map_canvas").style.width = x;document.getElementById("map_canvas").style.height = y;

}catch(e){}

}

   

function initialize() {

  if (typeof google === 'object' && typeof google.maps === 'object')

{  //alert("google");  }

8/18/2019 Google Map 2

20/21

  else  {  //alert("error");  return;  }

// Start asynchronous load of CSS

 map = null;

  try {  var latlng = new google.maps.LatLng(37.51190,127.02941);  var myOptions = {  zoom: 14,  center: latlng,  disableDefaultUI: true,

  zoomControl: true,  zoomControlOptions : {

style: google.maps.ZoomControlStyle.DEFAULT  },

  mapTypeControl: true,  mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT

  },  navigationControl: true,  scrollwheel: true,  /*navigationControlOptions: {  style: google.maps.NavigationControlStyle.SMALL,  position: google.maps.ControlPosition.TOP_LEFT  },*/  scaleControl: false,  mapTypeId: google.maps.MapTypeId.ROADMAP  };

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

var markers = new Array();

var regionChangeFunction = function(){if(window.MKMapView) {

  window.MKMapView.webviewReportingRegionChange();  }  }; 

var clickFunction = function(mouseEvent){

if(window.MKMapView) {  window.MKMapView.mapClickedEventAtPos([mouseEvent.latLng.lat(),mouseEvent.latLng.lng()]);

var jsonLatLong = JSON.stringify({"latitude":mouseEvent.latLng.lat(), "longitude":mouseEvent.latLng.lng()});  window.MKMapView.webviewReportingClick(jsonLatLong);  }  }; 

google.maps.event.addListener(map, 'drag', regionChangeFunction);  google.maps.event.addListener(map, 'zoom_changed', regionChangeFunction)

;  google.maps.event.addListener(map, 'click', clickFunction); 

8/18/2019 Google Map 2

21/21

  createUserLocationMarker();  }

catch(err)  {  if(window.MKMapView)

{  window.MKMapView.webviewReportingLoadFailure();

  }  }

 if (map == null)

  {  var mapView = document.getElementById("map_canvas");  mapView.innerHTML = "Error Loading MapView, an internet connection is required.
Retry";  }

  vehicleMarker = new google.maps.Marker({clickable: false,icon: new google.maps.MarkerImage(

'car_location2.png',null,null,new google.maps.Point(17, 17)

),position: new google.maps.LatLng(0,0),visible: true

});

vehicleMarker.setMap(map);

  }