Google map

[ShumNo]

Ребят, помогите, пожалуйста

Есть карта Google map

http://shumno.com/pub/gmap/

код карты

var map = null;
function initialize() {
	var myOptions = {
		zoom: 3,
		center: new google.maps.LatLng(35,60),
		mapTypeId: google.maps.MapTypeId.TERRAIN
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	google.maps.event.addListener(map, 'click', function() {infowindow.close();});

	var point = new google.maps.LatLng(36.5959,30.5584); 
	var marker = createMarker(point,'город-курорт Кемер')

	var point = new google.maps.LatLng(36.5521,32);
	var marker = createMarker(point,'город-курорт Алания')

	var point = new google.maps.LatLng(-18.35452552912664, 147.568359375);
	var marker = createMarker2(point,'Большой барьерный риф')

	var point = new google.maps.LatLng(44.89430934025077, 15.607795715332031);
	var marker = createMarker3(point,'Плитвицкие озера в Хорватии')
}

var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150,50) }); 
var beach = 'beach.png';
var park = 'park.png';
var beautiful = 'beautiful.png';
function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
		icon: beach,
        zIndex: Math.round(latlng.lat()*-100000)<<5
	});
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
	});
}
function createMarker2(latlng, html) {
	var contentString = html;
	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
		icon: beautiful,
		zIndex: Math.round(latlng.lat()*-100000)<<5
	});
    google.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent(contentString); 
		infowindow.open(map,marker);
	});
}
function createMarker3(latlng, html) {
	var contentString = html;
	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
		icon: park,
		zIndex: Math.round(latlng.lat()*-100000)<<5
	});
    google.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent(contentString); 
		infowindow.open(map,marker);
	});
}
window.onload = function() {initialize();}

Очень хочется разделить код на 2 файла в первом только инициализация карты, а во втором метки и все, что к ним относится. Помогите, пожалуйста

[Great Rash]

Что-то непонятно. Хочется разделить на 2 файла. Ну и что мешает? Написать в одном файле одно, а в другом - другое. Или надо не просто разделить, а что-то еще сделать?

[ShumNo]

При делении оно не работает только разделить ничего более

в первом файле необходимы данные инициализации карты

function initialize() {
        var myOptions = {
                zoom: 3,
                center: new google.maps.LatLng(35,60),
                mapTypeId: google.maps.MapTypeId.TERRAIN
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

а во втором все остальное. Если тупо разделить на 2 файла то

var point
var marker

оказываются вне функции и уже не работают

[Great Rash]

Глобальные переменные на то и глобальны, что их область видимости распространяется на весь проект, а не только на конкретную функцию. Покажите как вы делите?

[ShumNo]

эх в том то и дело, что я не знаю, как их поделить

максимум, что я понимаю, так это то, что это переменные и они работают внутри функции и при выносе их оттуда работать они перестают

[Great Rash]

Ну раз вы не знаете как что работает, может тогда не надо ничего трогать?

Систему, которая работает, не трогай © программистская притча

[ShumNo]

С одной то стороны да, а с другой гибкости у этого решения нет и чтобы это хоть как-то исправить надо выделить метки в отдельный файл, который уже можно будет подключать куда необходимо.

Но отделить бы их только от самой карты (кусок переменных var point var marker вынести из под функции)

[Great Rash]

Ну для начала я вам советую почитать и разобраться в API карт. Сам я их не знаю, и мне оно не надо, по этому ничего дельного больше не предложу.

[ShumNo]

А если абстрагироваться от api гугла, то как это задача решается на JS?

[ShumNo]

не ни кто не встречал?

[Great Rash]

Я могу написать прототип скрипта, скажем так... но я не уверен, что вы сможете доделать его под свои нужды. Писать?

[ShumNo]

Я был бы только благодарен за любую помощь

Нужда то моя простая на словах, а вот простая ли она на коде не знаю. Нужно только разделить карту от меток, чтобы при добавлении новой метки не пришлось менять код на всех страницах на которых эта карта стоит, некое образное подобие инклюда в php

Edited September 28, 2011 by ShumNo

[Great Rash]

Ок, ща сделаем.

[Great Rash]

/********/
* File 1
/********/
var Gmap = (function() {
	var options = {};

	function createMarker(map, latlng, html) {
		// create marker method
	}

	return {
		init: function(o) {
			// init method
		}
	};
}());

/********/
* File 2
/********/
// call
Gmap.init({
	param1: value,
	param2: value,
	param3: value,
	markers: {
		marker1: [lat, long, html],
		marker2: [lat, long, html],
		marker3: [lat, long, html]
	},
	options: {
		opt1: value,
		opt2: value,
		opt3: value
	}
});

Ну вот как-то так я бы сделал.

[ShumNo]

Сложная штука.. функция createMarker переехала вроде как не туда куда нужно

var Gmap = (function initialize() {
        var myOptions = {
			zoom: 3,
			center: new google.maps.LatLng(35,60),
			mapTypeId: google.maps.MapTypeId.TERRAIN
		};
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		google.maps.event.addListener(map, 'click', function() {infowindow.close();});

        function createMarker(map, latlng, html) {
                // create marker method
        }

        return {
                init: function(o) {
                        // init method
                }
        };
}());
window.onload = function() {initialize();}

Такая штука не заработала

В первом файлике бы в идеале только код вывода карты. Хотя функцию открытия метки можно тоже убрать

function initialize() {
	var myOptions = {
		zoom: 3,
		center: new google.maps.LatLng(35,60),
		mapTypeId: google.maps.MapTypeId.TERRAIN
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	google.maps.event.addListener(map, 'click', function() {infowindow.close();});
}
window.onload = function() {initialize();}

А во втором бы все остальное. Спасибо, что откликнулись, попробую разобраться в этом всем..

Edited September 28, 2011 by ShumNo

[Great Rash]

Сложная штука.. функция createMarker переехала вроде как не туда куда нужно

createMarker - это не функция, это должен быть метод, который будет создавать маркер на карте.

var Gmap = (function initialize() {
        var myOptions = {
                        zoom: 3,
                        center: new google.maps.LatLng(35,60),
                        mapTypeId: google.maps.MapTypeId.TERRAIN
                };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                google.maps.event.addListener(map, 'click', function() {infowindow.close();});

        function createMarker(map, latlng, html) {
                // create marker method
        }

        return {
                init: function(o) {
                        // init method
                }
        };
}());
window.onload = function() {initialize();}

Вот этот код полностью неправильный, начиная с первой строчки. Мне кажется вам лучше бросить эту затею, т.к. слишком много времени потратите, ибо тут надо начинать с основ ООП.

Не знаю поможет ли, но попробуйте прочитать этот туториал - потратите на него часа полтора-два зато хоть примерно будете понимать, что не так делаете.

[ShumNo]

Вопрос на 95% решен. решение http://jsfiddle.net/qRzcX/2/

добавилась кластеризация меток + более компактный код меток

код

var map = null;
var markerArray = []; //create a global array to store markers
var myPoints = [[43.65654, -79.90138, 'ABC'],[43.91892, -78.89231, 'DEF'],[43.82589, -79.10040, 'GHA']];  //create global array to store points

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(43.907787, -79.359741),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var mcOptions = {
        gridSize: 50,
        maxZoom: 15
    };
    var mc = new MarkerClusterer(map, [], mcOptions);

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

    // Add markers to the map
    // Set up markers based on the number of elements within the myPoints array
    for(var i=0; i<myPoints.length; i++){
         createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
    }

    mc.addMarkers(markerArray , true);
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: 'http://google-maps-icons.googlecode.com/files/beach-car.png',
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    marker.setAnimation(google.maps.Animation.BOUNCE);

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

    markerArray.push(marker); //push local var marker into global array
}

window.onload = initialize;