-1

Как этот скрипт вывести в отдельную функцию? и чтобы можно было вызывать её несколько раз

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?sensor=true&callback=initializeMap";
  document.body.appendChild(script);
}
if (window.addEventListener) window.addEventListener("load", loadScript, false);
else if (window.attachEvent) window.attachEvent("onload", loadScript);

function initializeMap() {
  var myLatlng = new google.maps.LatLng(56.7342973, 37.1636543);
  var uluru = {
    lat: 56.7332973,
    lng: 37.1759543
  };
  var myOptions = {
    zoom: 15,
    scrollwheel: false,
    center: uluru,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_LEFT
    }
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var markerImage = new google.maps.MarkerImage(
    'images/pointMaps.png',
    new google.maps.Size(42, 61)
  );
  var markerImageHover = new google.maps.MarkerImage(
    'images/pointMaps.png',
    new google.maps.Size(42, 61)
  );

  var marker = new google.maps.Marker({
    icon: markerImage,
    position: myLatlng,
    map: map,
    title: "Hello World!"
  });

  var content = document.createElement('div');
  content.innerHTML = "<strong>Hello world</strong> + JS ^_^";
  var infowindow = new google.maps.InfoWindow({
    content: content
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });

  google.maps.event.addListener(marker, 'mouseover', function() {
    marker.setIcon(markerImageHover);
  });

  google.maps.event.addListener(marker, 'mouseout', function() {
    marker.setIcon(markerImage);
  });
}

4
  • Какую именно функцию? Куда вынести (в отдельный JS файл? отдельный блок <script>?) И в чём проблема прямо сейчас просто взять и вынести её? 7 окт 2017 в 8:04
  • Это называется инкапсуляция
    – Alex78191
    7 окт 2017 в 17:14
  • Нужно чтобы 2 раза карта на сайте появлялась, проблема в том что скрипт карты тот что снизу переопределяет все остальные jsfiddle.net/cctax6nj 8 окт 2017 в 10:24
  • @Arhad Вот тут 2 карты с разными обёртками, но отображается только та что снизу jsfiddle.net/cctax6nj/1 PS: просто скопируйте код из 3 окошка в обычный .html файл 8 окт 2017 в 10:26

2 ответа 2

1

может я не до конца понимаю вопрос но попробуйте так, просто создаете новый обет map2 = new google.maps.Map(document.getElementById("map_canvas_2"),myOptions);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Project</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<style>
	#page{
		width:100%;
		background:#dec0de;
	}

	#map_canvas, #map_canvas_2{
		width:100%;
		height:500px;
		margin:0 auto;
	}
</style>
<div id="page">
	<div class="gMap-holder" id="map_canvas"></div>
</div>

<div id="page_2">
	<div class="gMap-holder" id="map_canvas_2"></div>
</div>

</body>

<script type="text/javascript">
    function loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.googleapis.com/maps/api/js?sensor=true&callback=initializeMap";
      document.body.appendChild(script);
    }
    if (window.addEventListener) window.addEventListener("load", loadScript, false);
    else if (window.attachEvent) window.attachEvent("onload", loadScript);
    function initializeMap(){
      var myLatlng = new google.maps.LatLng(56.7342973, 37.1636543);
      var uluru = {lat: 56.7332973, lng: 37.1759543};
      var myOptions = {
        zoom: 15,
        scrollwheel: false,
        center: uluru,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_LEFT
        }
      };
      var myOptions2 = {
        zoom: 15,
        scrollwheel: false,
        center: uluru,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_LEFT
        }
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);

      var markerImage = new google.maps.MarkerImage(
        'images/pointMaps.png',
        new google.maps.Size(42,61)
        );
      var markerImageHover = new google.maps.MarkerImage(
        'images/pointMaps.png',
        new google.maps.Size(42,61)
        );

      var marker = new google.maps.Marker({
        icon: markerImage,
        position: myLatlng,
        map: map,
        title:"Hello World!"
      });

      var content = document.createElement('div');
      content.innerHTML = "<strong>Hello world</strong> + JS ^_^";
      var infowindow = new google.maps.InfoWindow({
        content: content
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });

      google.maps.event.addListener(marker, 'mouseover', function() {
        marker.setIcon(markerImageHover);
      });

      google.maps.event.addListener(marker, 'mouseout', function() {
        marker.setIcon(markerImage);
      });
    }
</script>

</html>

1
    <script type="text/javascript">
//для того что бы абстрагировать код нужно обернуть его в другую функцыю
// и вызывать при необходимости на любом событии
    newFunction = function(){
    			function loadScript() {
    				var script = document.createElement("script");
    				script.type = "text/javascript";
    				script.src = "http://maps.googleapis.com/maps/api/js?sensor=true&callback=initializeMap";
    				document.body.appendChild(script);
    			}
    			if (window.addEventListener) window.addEventListener("load", loadScript, false);
    			else if (window.attachEvent) window.attachEvent("onload", loadScript);
    			function initializeMap(){
    				var myLatlng = new google.maps.LatLng(56.7342973, 37.1636543);
    				var uluru = {lat: 56.7332973, lng: 37.1759543};
    				var myOptions = {
    					zoom: 15,
    					scrollwheel: false,
    					center: uluru,
    					mapTypeId: google.maps.MapTypeId.ROADMAP,
    					mapTypeControlOptions: {
    						position: google.maps.ControlPosition.BOTTOM_LEFT
    					}
    				};
    				var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    				var markerImage = new google.maps.MarkerImage(
    					'images/pointMaps.png',
    					new google.maps.Size(42,61)
    					);
    				var markerImageHover = new google.maps.MarkerImage(
    					'images/pointMaps.png',
    					new google.maps.Size(42,61)
    					);

    				var marker = new google.maps.Marker({
    					icon: markerImage,
    					position: myLatlng, 
    					map: map,
    					title:"Hello World!"
    				});

    				var content = document.createElement('div');
    				content.innerHTML = "<strong>Hello world</strong> + JS ^_^";
    				var infowindow = new google.maps.InfoWindow({
    					content: content
    				});

    				google.maps.event.addListener(marker, 'click', function() {
    					infowindow.open(map, marker);
    				});

    				google.maps.event.addListener(marker, 'mouseover', function() {
    					marker.setIcon(markerImageHover);
    				});

    				google.maps.event.addListener(marker, 'mouseout', function() {
    					marker.setIcon(markerImage);
    				});
    			}
}
    	</script>
1
  • Сложно объяснить. Если этот скрипт обернуть то он перестаёт работать. А нужно просто сделать чтобы 2 раза карта появлялась jsfiddle.net/cctax6nj - просто скопируйте код из 3 окошка в обычный .html файл 8 окт 2017 в 10:22

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.