Arama butonu
Bu konudaki kullanıcılar: 2 misafir
1
Cevap
1000
Tıklama
0
Öne Çıkarma
Google kullanan Harita Scriptini yandex veya openstreetmap uyarlama
R
10 yıl
Teğmen
Konu Sahibi

Arkadaşlar selam,

http://codecanyon.net/item/awesome-map-fully-customizable-markers-map/6695203 linklteki scripti satın aldım sitemde kullanacağım ancak google apisi / haritası kullanıyor. ben ise altta gözükmesini istediğim ya yandex yada openstreetmaps ancak bitürlü beceremedim openstreetmap sanırım daha kolay ancak onu çalıştırdığımda kayıtlı "pin" ler gelmiyor. Sistem PHP tabanlı

önerisi olan yardımcı olabilcek ?

JS kodu
//<![CDATA[ 

$(document).ready(function() {
// Street View Service
var sv_service = new google.maps.StreetViewService();

// Create the MAP
var map = new google.maps.Map(document.getElementById("awm_map"), {
center: new google.maps.LatLng(40.713, -74.0005),
zoom: 13,
mapTypeId: 'roadmap'
});

var theme_array = {
"snazzy" : [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#333739"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2ecc71"}]},{"featureType":"poi","stylers":[{"color":"#2ecc71"},{"lightness":-7}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#2ecc71"},{"lightness":-28}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#2ecc71"},{"visibility":"on"},{"lightness":-15}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#2ecc71"},{"lightness":-18}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#2ecc71"},{"lightness":-34}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#333739"},{"weight":0.8}]},{"featureType":"poi.park","stylers":[{"color":"#2ecc71"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#333739"},{"weight":0.3},{"lightness":10}]}],
"pale" : [{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"landscape","stylers":[{"color":"#f2e5d4"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"administrative","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"road"},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{},{"featureType":"road","stylers":[{"lightness":20}]}],
"bright" : [{"featureType":"water","stylers":[{"color":"#19a0d8"}]},{"featureType":"administrative","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"},{"weight":6}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#e85113"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#efe9e4"},{"lightness":-40}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#efe9e4"},{"lightness":-20}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"lightness":100}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"lightness":-100}]},{"featureType":"road.highway","elementType":"labels.icon"},{"featureType":"landscape","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape","stylers":[{"lightness":20},{"color":"#efe9e4"}]},{"featureType":"landscape.man_made","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"lightness":100}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"lightness":-100}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"hue":"#11ff00"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"lightness":100}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"hue":"#4cff00"},{"saturation":58}]},{"featureType":"poi","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#f0e4d3"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#efe9e4"},{"lightness":-25}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#efe9e4"},{"lightness":-10}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"simplified"}]}],
"neutral" : [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#193341"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2c5a71"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#29768a"},{"lightness":-37}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#3e606f"},{"weight":2},{"gamma":0.84}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":0.6},{"color":"#1a3541"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#2c5a71"}]}],
"blue" : [{"featureType":"water","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"landscape","stylers":[{"color":"#f2f2f2"}]},{"featureType":"road","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]}],
"subtle" : [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
};

var lastid;

// Save the list of markers
var markers = [];
var markerCluster;

var marker_array = [];

var geocoder = new google.maps.Geocoder();

var infoBox = new InfoBox({
disableAutoPan: false,
boxStyle: {
background: "#FFF",
opacity: 1,
border: "1px solid #959595"
},
pane: "floatPane",
closeBoxMargin: "6px 6px 0px 0px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});

var streetview = document.createElement("div");
streetview.className = "streetview";


google.maps.event.addListener(infoBox,'domready',function() {


// Delete a marker
$(".admin_delete").click( function(e) {
e.preventDefault();

var marker_id = $(this).attr("data-id");

var markerToDelete = getAwmMarkerByUniqueId(marker_id);

var r = confirm("Are you sure that you want to delete this marker ?");
if (r == true) {

// Remove from the array
var markerindex = $.inArray(markerToDelete, markers);
if(markerindex != -1)
{
markers.splice(markerindex, 1);
}

// Remove from the map
markerToDelete.getAwmMarker().setMap(null);
infoBox.setMap(null);
}
});
});

// Retrieve the markers from the database
$.ajax({
url: adm_path + "/ajax/get_markers.php",
type: "POST",
success: function(data) {

// Get markers infos
if(typeof data.markers != 'undefined' && data.markers.length > 0) {

$.each(data.markers, function(i, marker) {
var point = new google.maps.LatLng(marker.lat,marker.lng);

// Get the formatted address of the marker
var html = document.createElement("div");
html.className = "contentbox";

var htmlinner = document.createElement("div");
htmlinner.className = "contentbox_inner";

var title = document.createElement("div");
title.className = "awm_title";
title.innerHTML = marker.name;

var descnode = document.createElement("div");
descnode.className = "awm_desc";
descnode.innerHTML = marker.desc;

var addressnode = document.createElement("div");

addressnode.className = "awm_address";
addressnode.innerHTML = "<i class='fa fa-location-arrow'></i> " + marker.address;

htmlinner.appendChild(title);
htmlinner.appendChild(descnode);
htmlinner.appendChild(addressnode);

html.appendChild(htmlinner);

var streetview = "";

if(marker.preview == "true" || marker.oi_preview == "true") {
streetview = document.createElement("div");
streetview.className = "streetview";
streetview.innerHTML = marker.sv_url;

html.appendChild(streetview);
}

// Create the new marker
var marker = new AwmMarker(map, point, marker.content, marker.name, marker.desc, marker.address, marker.icon, marker.icon_color, marker.marker, marker.preview, marker.sv_url, marker.oi_preview, false);
markers.push(marker);

var newMarker = marker.getAwmMarker();

// Add Click Event for the marker
bindinfoBox(newMarker, map, infoBox, "<div class='contentbox'>"+html.innerHTML+"</div>");
});


// Get map infos
if(data.map.lat != null && data.map.lng != null) {
var center = new google.maps.LatLng(data.map.lat,data.map.lng);

map.setCenter(center);
map.setZoom(parseInt(data.map.zoom));

var cluster_status = data.map.cluster;
var search_status = data.map.search;

var theme = data.map.theme;

map.set("styles", theme_array[theme]);

if(search_status == 1) {
$(".check_search_bar").attr("checked", "checked");

// Add the search box
$(".awm_search").show();
} else {
$(".awm_search").hide();
}

if(cluster_status == 1) {
$(".check_cluster").attr("checked", "checked");

// Cluster the markers
clusterMarkers(markers);
}
}
}
}
});

// Autocomplete place
$("#location").keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
}
});

var input_places = document.getElementById('location');

var autocomplete = new google.maps.places.Autocomplete(input_places);
autocomplete.bindTo('bounds', map);

google.maps.event.addListener(autocomplete, 'place_changed', function() {

var place = autocomplete.getPlace();

if (!place.geometry) {
return;
}

// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}

});

function clusterMarkers(markers)
{
var markersToCluster = [];

$.each(markers, function(i, marker) {
markersToCluster.push(marker.awm_marker);
});

markerCluster = new MarkerClusterer(map, markersToCluster)
}

// Convert the markers Array for the DB
function convertAwmMarkersForDB(markers)
{
var db_markers = [];

$.each(markers, function(i, marker) {
var tmp_marker = marker.getAwmMarker();

var marker_values = {
name : tmp_marker.awm_title,
desc : tmp_marker.awm_desc,
lat : tmp_marker.position.lat(),
lng : tmp_marker.position.lng(),
address : tmp_marker.awm_address,
content : tmp_marker.labelContent,
icon : tmp_marker.awm_icon,
icon_color : tmp_marker.awm_icon_color,
marker : tmp_marker.awm_marker,
preview : tmp_marker.sv_preview,
sv_url : tmp_marker.sv_url,
unique_id : tmp_marker.marker_id
};

db_markers.push(marker_values);
});

return db_markers;
}

// Find a marker by its unique id
function getAwmMarkerByUniqueId(unique_id)
{
var markerFound;

$.each(markers, function(i, currMarker) {
if(currMarker.getAwmMarker().marker_id == unique_id) {
markerFound = currMarker;
}
});

return markerFound;
}

// Click Listener (to add a new place)
function bindinfoBox(marker, map, infoBox, html) {
google.maps.event.addListener(marker, 'click', function() {

lastmarker = marker;

infoBox.setContent(html);

infoBox.open(map, marker);
});
}

function entityForSymbolInContainer(selector) {
var code = $(selector).text().charCodeAt(0);
var codeHex = code.toString(16).toUpperCase();
while (codeHex.length < 4) {
codeHex = "0" + codeHex;
}

return "&#x" + codeHex + ";";
}

function doNothing() {}
});

//]]>




Anasayfa da kullandığım index.php

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Harita</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Duru+Sans' rel='stylesheet' type='text/css'>
<link href="harita/css/bootstrap.min.css" rel="stylesheet">
<link href="harita/css/font-awesome.min.css" rel="stylesheet">
<link href="harita/css/styles.css" rel="stylesheet">
<link href="harita/css/awesome_map.css" rel="stylesheet">

<script src="harita/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var adm_path = "harita/";
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places" type="text/javascript"></script>
<script src="harita/js/infobox.js" type="text/javascript"></script>
<script src="harita/js/markerwithlabel.js" type="text/javascript"></script>
<script src="harita/js/awm_marker.js" type="text/javascript"></script>
<script src="harita/js/markerclusterer.js" type="text/javascript"></script>
<script src="harita/js/awesome_map.js" type="text/javascript"></script>
</head>

<body>
<div class="container demo">
<div class="title">
</div>
<div class="alert alert-info">
<div style="text-align:center">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=101465659&url=harita/admin.php" data-href="harita/admin.php">Try the Awesome Map Admin</a>
</div>
</div>
<form class="awm_search">
<input type="text" class="form-control" id="location" placeholder="Enter the location where you want to go.">
</form>
<div id="awm_map" class="col-md-12 map"></div>
<div class="features">
<h3 class="feature_title"> </h3>
<div class="alert alert-info"></div>
</div>
</div>
</body>
</html>



Diğer kodlara ihtiyaç var ise söyleyin ancak bunları modifiye etmek yeter gibi.

Teşekkürler

OSM

http://wiki.openstreetmap.org/wiki/Google_Maps_Example



R
10 yıl
Teğmen
Konu Sahibi

Neyse çözdüm;

Not: Donanımhaber bitmiş.



DH Mobil uygulaması ile devam edin. Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin. Gizle ve güncelleme çıkana kadar tekrar gösterme.