Rectangle 27 1

var map;
var root;
var geocoder;
var root_content= 'Type: [type]<BR>IP: 192.168.10.25<BR>Address: [address]';
function initialize() {
    geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': 'Ha noi, Vietnam'}, function(results, status) {
				root = results[0].geometry.location;
			
			var myStyles =[
			
       {
         featureType: "administrative",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       },{
         featureType: "poi",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       },{
         featureType: "water",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       }
     
];
				map = new google.maps.Map(document.getElementById('map'), {
				  zoom: 10,
				  center: root,
				  mapTypeId: google.maps.MapTypeId.ROADMAP,
				  streetViewControl: false, styles: myStyles,
					disableDefaultUI: true, scrollwheel: false,
					 zoomControl: false, disableDoubleClickZoom: true
				});	
				
				
				var center = {latLng: root, style: 'ae', content: 'md'};
try{
				Draw();
}catch(e){alert(e)}
				 var zoomControlDiv = document.createElement('div');
  var zoomControl = new ZoomControl(zoomControlDiv, map);

  zoomControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
				
				
				
			
			});
}
function ZoomControl(controlDiv, map) {
  
  // Creating divs & styles for custom zoom control
  controlDiv.style.padding = '5px';

  // Set CSS for the control wrapper
  var controlWrapper = document.createElement('div');
//  controlWrapper.style.background = 'white';
  controlWrapper.style.borderStyle = 'solid';
  controlWrapper.style.borderColor = 'gray';
  controlWrapper.style.borderWidth = '1px';
  controlWrapper.style.cursor = 'pointer';
  controlWrapper.style.textAlign = 'center';
  controlWrapper.style.width = '32px'; 
  controlWrapper.style.height = '100px';
  controlDiv.appendChild(controlWrapper);
  
  // Set CSS for the zoomIn
  var zoomInButton = document.createElement('div');
  zoomInButton.innerHTML = '<br><img src="https://i.stack.imgur.com/2k0UD.png" title="Zoom In">';
  controlWrapper.appendChild(zoomInButton);
    
  // Set CSS for the zoomOut
  var zoomOutButton = document.createElement('div');
  zoomOutButton.innerHTML = '<img src="https://i.stack.imgur.com/zPVFs.png" title="Zoom Out">';
  controlWrapper.appendChild(zoomOutButton);
  
   var removeLineButton = document.createElement('div');
  removeLineButton.innerHTML = '<img src="https://i.stack.imgur.com/tAc0f.png" title="Hide Line">';
  controlWrapper.appendChild(removeLineButton);

  // Setup the click event listener - zoomIn
  google.maps.event.addDomListener(zoomInButton, 'click', function() {
	 Clean();
    map.setZoom(map.getZoom() + 1);
	Draw();
  });
     google.maps.event.addDomListener(zoomOutButton, 'click', function() {
	Clean();
    map.setZoom(map.getZoom() - 1);
	Draw();
  });  
  
  google.maps.event.addDomListener(removeLineButton, 'click', function() {
			for(var i=0; i<po.length; i++) {
						po[i].setMap(x?map:null);
					
					}
					
					x=x?false:true;
					removeLineButton.innerHTML=x? 
					'<img src="https://i.stack.imgur.com/LeM4f.png" title="Show line">'
					:'<img src="https://i.stack.imgur.com/tAc0f.png" title="Hide line">';
			
  });  
    
}
var x = false;
var po  = [];
var nd  = [];
function Draw1() {
	for(var i=0; i<po.length; i++) {
						po[i].setMap(null);
					
					}
					for(var i=0; i<nd.length; i++) {
						nd[i].remove();
						
					}
					nd=[];
					po=[];
}

function GetData() {
	
}

function Draw1() {
/*
	var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
	var contact = JSON.parse(jsontext);

	contact=JSON.parse
	alert(contact.firstname);
*/
	for(var i=0; i<node.length; i++) {
		//nd.push(create_node(map, node[i]));
	}
	for(var i=0; i<line.length; i++) {
		//po.push(connect_node(map, line.node1, line.node2));
	}
}

function Clean() {
	for(var i=0; i<po.length; i++) {
		po[i].setMap(null);
	}
	for(var i=0; i<nd.length; i++) {
		nd[i].setMap(null);
	}
	po = [];
	nd = [];
}

function Draw() {
				var cen= root;
				var a  =  true;
				var b  = true;
				var dis = 0.1;
				var k  = 0;
				
				for(var i=0; i<10; i++) {
					k++;
					if(a) {
						cen = new google.maps.LatLng(cen.lat()+dis, cen.lng());
						a=false;
					}
					else {
						cen = new google.maps.LatLng(cen.lat(), cen.lng()+dis);
						a=true;
					}
					var style = 'in';
					if(k%5==1) style='ae';
					else if(k%5==2) style='adn';
					else if(k%5==3) style='mn';
					else if(k%5==4) style='asn';
					
					var cur = {latLng: cen, style: style,  content: style.toUpperCase()};
					nd.push(create_node(map, cur));
					for(var j=i+1; j<10; j++) {
						k++;
						if(a) {
						cen = new google.maps.LatLng(cen.lat()+((j%2)==0?1:(-1))*dis, cen.lng());
						a=false;
					}
					else {
						cen = new google.maps.LatLng(cen.lat(), cen.lng()+((j%2)==0?1:(-1))*dis);
						a=true;
					}
					var style = 'in';
					if(k%5==1) style='ae';
					else if(k%5==2) style='asn';
					else if(k%5==3) style='mn';
					else if(k%5==4) style='adn';
						var sub = {latLng: cen, style: style,  content: style.toUpperCase()};
				
						po.push(connect_node(map, cur, sub));
						
						nd.push(create_node(map, sub));
					}
				}
				
}
google.maps.event.addDomListener(window, 'load', initialize);



function CustomMarker(latlng, map, args) {
	this.latlng = latlng;	
	this.args = args;	
	this.setMap(map);	
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
	
	var self = this;
	var div = this.div;
	if (!div) {
		div = this.div = document.createElement('div');
		var style = '';
		var content = '';
		if (typeof(self.args.marker_style) !== 'undefined') {
			style = self.args.marker_style;
			div.className = 'iot-node-'+style;			
		}
		

		if (typeof(self.args.marker_content) !== 'undefined') {
			content = self.args.marker_content;
			var a = document.createElement('a');
		
			a.innerHTML = content;
			div.appendChild(a);
			if(style=='info') {
				var span =  document.createElement('span');
			
				span.innerHTML = 'x';
				google.maps.event.addDomListener(span, "click", function(event) {
					me.remove();
				});
				
				a.appendChild(span);
			}
			
		}
		if (typeof(self.args.marker_style) !== 'undefined' && style!='') {
				var cur = this.getPosition();
				var me  = this;
				
				var panes = this.getPanes();
				panes.overlayImage.appendChild(div);
				var point = this.getProjection().fromLatLngToDivPixel(this.getPosition());
				if (point) {
					if(style!='info') {
						div.style.left = (point.x-10 ) + 'px';
						div.style.top  = (point.y-10)  + 'px';
						google.maps.event.addDomListener(div, "click", function(event) {
							geocoder.geocode({'latLng': cur}, function(results, status) {
								
								  var addr = 'null';
										if (status === google.maps.GeocoderStatus.OK) {
										  if (results[1]) {
											addr = results[1].formatted_address;
										  }
										}
							var sub = {latLng: cur, style: 'info',  content: root_content.replace('[type]', style.toUpperCase()).replace('[address]', addr)};
							  nd.push(create_node(map, sub));
								
								
								
								
								
							  });
						});

					
					} else {
						
						div.style.left = (point.x-40 ) + 'px';
						div.style.top  = (point.y-15 -div.offsetHeight )  + 'px';
						
					}
				}
		}
		
	}
};
CustomMarker.prototype.remove = function() {
	
	if (this.div) {
		this.div.parentNode.removeChild(this.div);
		this.div = null;
	}	
	this.setMap(null);
	
};
CustomMarker.prototype.getPosition = function() {
	return this.latlng;	
};

function create_node(map, node) {
	return new CustomMarker(
		node.latLng, 
		map,
		{
			marker_style: node.style,
			marker_content: node.content
		}
	);
}



var color= {};
color['ae'] = '#ff3300';
color['mn'] = '#669900';
color['in'] = '#ff9900';
color['asn']= '#cc9900';
color['adn']= '#330099';

function rand(min,max,interval)
{
    if (typeof(interval)==='undefined') interval = 1;
    var r = Math.floor(Math.random()*(max-min+interval)/interval);
    return r*interval+min;
}

function connect_node(map, node1,  node2) {

	return new google.maps.Polyline({
		path: [node1.latLng, node2.latLng],
		geodesic: true,
		strokeColor: color[node1.style],
        strokeOpacity: 0.6,
        strokeWeight: 2,
		map: map
	});
}
.iot-node-ae, .iot-node-asn, .iot-node-adn, .iot-node-mn, .iot-node-in, .iot-node-info {
	position: absolute;
	list-style-type: none;
	left: 20px;
	top: 20px;
}

.iot-node-ae>a, .iot-node-asn>a, .iot-node-adn>a, .iot-node-mn>a, .iot-node-in>a, .iot-node-info>a {
    position: relative;
    z-index: 2;
    display: block;
    width: 20px;
    height: 20px;
	border-style: solid;
    border-width: 2px;
	border-color: white;
	border-radius: 50%;
    background: #0079ff;
	text-align:center;
	font-weight: bold;
	padding-top:6px;
	padding-left:3px;
	padding-right:3px;
	color:white;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
}


.iot-node-info>a {
   width: 120px;
   height: 80px;
   position: relative;
   border-radius: 0;
   text-align:left;
}
.iot-node-info>a>span {
position: absolute; top: 2px; right:2px;
    cursor: pointer;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
}
.iot-node-info>a>span::hover {
position: absolute; top: 2px; right:2px;
cursor: pointer;
  
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
}

.iot-node-info>a::before {
   content:"";
   position: absolute;
   top: 100%;
   left: 0;
   width: 0;
   height: 0;
   border-left: 13px solid transparent;
   border-right: 26px solid #0079ff;
   border-bottom: 13px solid transparent;
}

.iot-node-ae::after, .iot-node-asn::after , .iot-node-adn::after , .iot-node-mn::after , .iot-node-in::after , .iot-node-info::after{
	content: '';
	position: absolute;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	//animation: cd-pulse 2s infinite;

}

 
@keyframes cd-pulse
{
	0%  {box-shadow:0 0 0 0 #0079ff}
	100%{box-shadow:0 0 0 20px rgba(255,150,44,0)}
}
/* AE */
.iot-node-ae{
	
}
.iot-node-ae>a{
	 background: #ff3300;
	 font-size:14px;
}

.iot-node-ae::after{
	//animation: cd-pulse 2s infinite;
}

/* asn */
.iot-node-asn{
	
}
.iot-node-asn>a{
	 background:  #cc9900;
}

.iot-node-asn::after{
	//animation: cd-pulse 2s infinite;
}

/* adn */
.iot-node-adn{
	
}
.iot-node-adn>a{
	 background:  #330099;
}

.iot-node-adn::after{
	//animation: cd-pulse 2s infinite;
}

/* mn */
.iot-node-mn{
	
}
.iot-node-mn>a{
	 background: #669900;
}

.iot-node-mn::after{
	//animation: cd-pulse 2s infinite;
}

/* IN */
.iot-node-in{
	
}
.iot-node-in>a{
	 background: #ff9900;
	 font-size:14px;
}


.iot-node-in::after{
	//animation: cd-pulse 2s infinite;
}
<!DOCTYPE HTML>
<html>
<head>

<title>Google Maps API</title>

<style type="text/css">
#map {
	width: 1500px;
	height: 1000px;
}
</style>
<link rel="stylesheet" type="text/css" href="iot_resource.css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type="text/javascript" src="iot_resource.js"></script>
<script type="text/javascript" src="init_map.js"></script>
</head>
<body>
	<div id="map">
	</div>
	<button onclick="Draw1()" />
</body>
</html>

javascript - Adding custom marker text to Google Map - Stack Overflow

javascript html google-maps google-api maps
Rectangle 27 0

control
var control = document.getElementById('control');

variable control got value null and because of that the next line

control.style.display = 'block';
Uncaught TypeError: Cannot read property 'style' of null

To fix that you have to add new element to your page with id control, like:

<div id="control"></div>

javascript - add google map "Uncaught Type Error: Cannot read property...

javascript
Rectangle 27 0

Yes, really sorry to not read correctly the documentation, I was sure splice was only used to remove elements. Thanks !

javascript - Google Map - Add a marker between 2 markers - Stack Overf...

javascript google-maps
Rectangle 27 0

Uncaught TypeError: Cannot read property 'SearchBox' of undefined

You also don't have an element with id="pac-input" on your page. Add this to your HTML markup:

<input id="pac-input"></input>

code snippet (with moon tiles as the originals are no longer available):

var ignKey = "ljozkgwvms60dtumhx67z6u3"
var markers = [];

function makeIGNMapType(layer, name, maxZoom) {
  return new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var normalizedCoord = getNormalizedCoord(coord, zoom);
      if (!normalizedCoord) {
        return null;
      }
      var bound = Math.pow(2, zoom);
      return 'http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' +
        '/' + zoom + '/' + normalizedCoord.x + '/' +
        (bound - normalizedCoord.y - 1) + '.jpg';
    },
    name: 'Moon',
  tileSize: new google.maps.Size(256, 256),
  maxZoom: 9,
  minZoom: 0
  });
}

function initialize() {
  var map_canvas = document.getElementById("map_canvas");

  var map = new google.maps.Map(map_canvas, {
    mapTypeId: 'IGN',
    scaleControl: true,
    streetViewControl: true,
    panControl: true,
    mapTypeControl: true,
    overviewMapControl: true,
    overviewMapControlOptions: {
      opened: true,
      position: google.maps.ControlPosition.BOTTOM_CENTER
    },


    mapTypeControlOptions: {
      mapTypeIds: [
        'IGN', 'IGNScanExpress',
        google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP
      ],
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    },
    center: new google.maps.LatLng(47, 3),
    zoom: 6,
    draggableCursor: "crosshair"
  });

  map.mapTypes.set('IGN', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS", "IGN", 18));
  map.mapTypes.set('IGNScanExpress', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE", "IGN Scan Express", 16));


  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */ (
    document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */
    (input));

  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    var place = null;
    var viewport = null;
    for (var i = 0; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });
      viewport = place.geometry.viewport;
      markers.push(marker);

      bounds.extend(place.geometry.location);
    }
    map.setCenter(bounds.getCenter());
  });

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
}


// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  var y = coord.y;
  var x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  var tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = (x % tileRange + tileRange) % tileRange;
  }

  return {
    x: x,
    y: y
  };
}






google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=false"></script>

<div id="map_canvas"></div>
<input id="pac-input"></input>

javascript - How to add a GoogleMap Search Box to my customized map? -...

javascript html google-maps google-maps-api-3 searchbar
Rectangle 27 0

If control element not exist in page, return the function if (control===null) return;

javascript - add google map "Uncaught Type Error: Cannot read property...

javascript
Rectangle 27 0

have you tried using firebug to view the properties of the array sounds like one of the items inside of it is null.

<html>
<script type="text/javascript">
var myCars=["Saab","Volvo","BMW"];;
console.log(myCars);    
</script>
</html>`

then look in the firebug console window to view properties of the array

javascript - Google Map API adding more then 10 markers - Stack Overfl...

javascript google-maps
Rectangle 27 0

The issue is that the Infobox class doesn't have mouseleave or mouseenter events. As such, when you try adding event handers for this, the "add" part of this step fails because these events don't exist.

Yep i posted an answer with that. But i will mark your as the answer. Would you happen to know how i can achieve that effect with v8??

Since you are using custom HTML for the infobox, you can use standard JavaScript events for this instead. w3schools.com/js/js_events_examples.asp

Uncaught TypeError: Cannot read property 'add' of undefined :: javascr...

javascript bing-maps
Rectangle 27 0

Microsoft disabled events on infoboxs in v8.

Uncaught TypeError: Cannot read property 'add' of undefined :: javascr...

javascript bing-maps
Rectangle 27 0

You have to read carefully

GEvent.addListener(newMarkers[count], 'mouseover', 
       (function(dinnerNumber)
          { return function()
                { document.getElementById(dinnerNumber).style.borderColor = '#000000';};        
          }
      )(dinnerNumber)
);

the 3-rd parameter is (function(var){return function(){//what you want wirh var;};})(var)

javascript - Dynamically Adding Listeners To Google Maps Markers - Sta...

javascript google-maps listeners
Rectangle 27 0

have you tried using firebug to view the properties of the array sounds like one of the items inside of it is null.

<html>
<script type="text/javascript">
var myCars=["Saab","Volvo","BMW"];;
console.log(myCars);    
</script>
</html>`

then look in the firebug console window to view properties of the array

javascript - Google Map API adding more then 10 markers - Stack Overfl...

javascript google-maps