Google Maps uit API wordt niet getoond
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// dit in de <head>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA3NgH3V4b_Io[.....]RQqdETVqXFemhQ6Dr3Tf-KVHRZ1uxN1pQkEGztp3w" type="text/javascript" charset="utf-8"></script>
// en dit in de <body>
<div id="sidebar_map"></div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
if (GBrowserIsCompatible()) {
document.write('<div id="map" style="width: 600px; height: 800px"><\/div>');
} else {
document.write('<b>Javascript must be enabled in order to use Google Maps.<\/b>');
}
//]]>
</script>
<noscript><b>Javascript must be enabled in order to use Google Maps.</b></noscript>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
/*************************************************
* Created with GoogleMapAPI 2.5
* Author: Monte Ohrt <monte AT ohrt DOT com>
* Copyright 2005-2006 New Digital Group
* http://www.phpinsider.com/php/code/GoogleMapAPI/
*************************************************/
var points = [];
var markers = [];
var counter = 0;
var sidebar_html = "";
var marker_html = [];
var to_htmls = [];
var from_htmls = [];
var map = null;
function onLoad() {
if (GBrowserIsCompatible()) {
var mapObj = document.getElementById("map");
if (mapObj != "undefined" && mapObj != null) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
document.getElementById("sidebar_map").innerHTML = "<ul class=\"gmapSidebar\">"+ sidebar_html +"<\/ul>";
}
} else {
alert("Sorry, the Google Maps API is not compatible with this browser.");
}
}
function createMarker(point, title, html, n, tooltip) {
if(n >= 0) { n = -1; }
var marker = new GMarker(point,{'title': tooltip});
var tabFlag = isArray(html);
if(!tabFlag) { html = [{"contentElem": html}]; }
to_htmls[counter] = html[0].contentElem + '<form class="gmapDir" id="gmapDirTo" style="white-space: nowrap;" action="http://maps.google.com/maps" method="get" target="_blank">' +
'<span class="gmapDirHead" id="gmapDirHeadTo">Directions: <strong>To here</strong> - <a href="javascript:fromhere(' + counter + ')">From here</a></span>' +
'<p class="gmapDirItem" id="gmapDirItemTo"><label for="gmapDirSaddr" class="gmapDirLabel" id="gmapDirLabelTo">Start address: (include addr, city st/region)<br /></label>' +
'<input type="text" size="40" maxlength="40" name="saddr" class="gmapTextBox" id="gmapDirSaddr" value="" onfocus="this.style.backgroundColor = \'#e0e0e0\';" onblur="this.style.backgroundColor = \'#ffffff\';" />' +
'<span class="gmapDirBtns" id="gmapDirBtnsTo"><input value="Get Directions" type="submit" class="gmapDirButton" id="gmapDirButtonTo" /></span></p>' +
'<input type="hidden" name="daddr" value="' +
point.y + ',' + point.x + "(" + title.replace(new RegExp(/"/g),'"') + ")" + '" /></form>';
from_htmls[counter] = html[0].contentElem + '<p /><form class="gmapDir" id="gmapDirFrom" style="white-space: nowrap;" action="http://maps.google.com/maps" method="get" target="_blank">' +
'<span class="gmapDirHead" id="gmapDirHeadFrom">Directions: <a href="javascript:tohere(' + counter + ')">To here</a> - <strong>From here</strong></span>' +
'<p class="gmapDirItem" id="gmapDirItemFrom"><label for="gmapDirSaddr" class="gmapDirLabel" id="gmapDirLabelFrom">End address: (include addr, city st/region)<br /></label>' +
'<input type="text" size="40" maxlength="40" name="daddr" class="gmapTextBox" id="gmapDirSaddr" value="" onfocus="this.style.backgroundColor = \'#e0e0e0\';" onblur="this.style.backgroundColor = \'#ffffff\';" />' +
'<span class="gmapDirBtns" id="gmapDirBtnsFrom"><input value="Get Directions" type="submit" class="gmapDirButton" id="gmapDirButtonFrom" /></span></p>' +
'<input type="hidden" name="saddr" value="' +
point.y + ',' + point.x + encodeURIComponent("(" + title.replace(new RegExp(/"/g),'"') + ")") + '" /></form>';
html[0].contentElem = html[0].contentElem + '<p /><div id="gmapDirHead" class="gmapDir" style="white-space: nowrap;">Directions: <a href="javascript:tohere(' + counter + ')">To here</a> - <a href="javascript:fromhere(' + counter + ')">From here</a></div>';
if(!tabFlag) { html = html[0].contentElem; }if(isArray(html)) { GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml(html); }); }
else { GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); }
points[counter] = point;
markers[counter] = marker;
marker_html[counter] = html;
sidebar_html += '<li class="gmapSidebarItem" id="gmapSidebarItem_'+ counter +'"><a href="javascript:click_sidebar(' + counter + ')">' + title + '<\/a><\/li>';
counter++;
return marker;
}
function isArray(a) {return isObject(a) && a.constructor == Array;}
function isObject(a) {return (a && typeof a == 'object') || isFunction(a);}
function isFunction(a) {return typeof a == 'function';}
function click_sidebar(idx) {
if(isArray(marker_html[idx])) { markers[idx].openInfoWindowTabsHtml(marker_html[idx]); }
else { markers[idx].openInfoWindowHtml(marker_html[idx]); }
}
function showInfoWindow(idx,html) {
map.centerAtLatLng(points[idx]);
markers[idx].openInfoWindowHtml(html);
}
function tohere(idx) {
markers[idx].openInfoWindowHtml(to_htmls[idx]);
}
function fromhere(idx) {
markers[idx].openInfoWindowHtml(from_htmls[idx]);
}
//]]>
</script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA3NgH3V4b_Io[.....]RQqdETVqXFemhQ6Dr3Tf-KVHRZ1uxN1pQkEGztp3w" type="text/javascript" charset="utf-8"></script>
// en dit in de <body>
<div id="sidebar_map"></div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
if (GBrowserIsCompatible()) {
document.write('<div id="map" style="width: 600px; height: 800px"><\/div>');
} else {
document.write('<b>Javascript must be enabled in order to use Google Maps.<\/b>');
}
//]]>
</script>
<noscript><b>Javascript must be enabled in order to use Google Maps.</b></noscript>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
/*************************************************
* Created with GoogleMapAPI 2.5
* Author: Monte Ohrt <monte AT ohrt DOT com>
* Copyright 2005-2006 New Digital Group
* http://www.phpinsider.com/php/code/GoogleMapAPI/
*************************************************/
var points = [];
var markers = [];
var counter = 0;
var sidebar_html = "";
var marker_html = [];
var to_htmls = [];
var from_htmls = [];
var map = null;
function onLoad() {
if (GBrowserIsCompatible()) {
var mapObj = document.getElementById("map");
if (mapObj != "undefined" && mapObj != null) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
document.getElementById("sidebar_map").innerHTML = "<ul class=\"gmapSidebar\">"+ sidebar_html +"<\/ul>";
}
} else {
alert("Sorry, the Google Maps API is not compatible with this browser.");
}
}
function createMarker(point, title, html, n, tooltip) {
if(n >= 0) { n = -1; }
var marker = new GMarker(point,{'title': tooltip});
var tabFlag = isArray(html);
if(!tabFlag) { html = [{"contentElem": html}]; }
to_htmls[counter] = html[0].contentElem + '<form class="gmapDir" id="gmapDirTo" style="white-space: nowrap;" action="http://maps.google.com/maps" method="get" target="_blank">' +
'<span class="gmapDirHead" id="gmapDirHeadTo">Directions: <strong>To here</strong> - <a href="javascript:fromhere(' + counter + ')">From here</a></span>' +
'<p class="gmapDirItem" id="gmapDirItemTo"><label for="gmapDirSaddr" class="gmapDirLabel" id="gmapDirLabelTo">Start address: (include addr, city st/region)<br /></label>' +
'<input type="text" size="40" maxlength="40" name="saddr" class="gmapTextBox" id="gmapDirSaddr" value="" onfocus="this.style.backgroundColor = \'#e0e0e0\';" onblur="this.style.backgroundColor = \'#ffffff\';" />' +
'<span class="gmapDirBtns" id="gmapDirBtnsTo"><input value="Get Directions" type="submit" class="gmapDirButton" id="gmapDirButtonTo" /></span></p>' +
'<input type="hidden" name="daddr" value="' +
point.y + ',' + point.x + "(" + title.replace(new RegExp(/"/g),'"') + ")" + '" /></form>';
from_htmls[counter] = html[0].contentElem + '<p /><form class="gmapDir" id="gmapDirFrom" style="white-space: nowrap;" action="http://maps.google.com/maps" method="get" target="_blank">' +
'<span class="gmapDirHead" id="gmapDirHeadFrom">Directions: <a href="javascript:tohere(' + counter + ')">To here</a> - <strong>From here</strong></span>' +
'<p class="gmapDirItem" id="gmapDirItemFrom"><label for="gmapDirSaddr" class="gmapDirLabel" id="gmapDirLabelFrom">End address: (include addr, city st/region)<br /></label>' +
'<input type="text" size="40" maxlength="40" name="daddr" class="gmapTextBox" id="gmapDirSaddr" value="" onfocus="this.style.backgroundColor = \'#e0e0e0\';" onblur="this.style.backgroundColor = \'#ffffff\';" />' +
'<span class="gmapDirBtns" id="gmapDirBtnsFrom"><input value="Get Directions" type="submit" class="gmapDirButton" id="gmapDirButtonFrom" /></span></p>' +
'<input type="hidden" name="saddr" value="' +
point.y + ',' + point.x + encodeURIComponent("(" + title.replace(new RegExp(/"/g),'"') + ")") + '" /></form>';
html[0].contentElem = html[0].contentElem + '<p /><div id="gmapDirHead" class="gmapDir" style="white-space: nowrap;">Directions: <a href="javascript:tohere(' + counter + ')">To here</a> - <a href="javascript:fromhere(' + counter + ')">From here</a></div>';
if(!tabFlag) { html = html[0].contentElem; }if(isArray(html)) { GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml(html); }); }
else { GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); }
points[counter] = point;
markers[counter] = marker;
marker_html[counter] = html;
sidebar_html += '<li class="gmapSidebarItem" id="gmapSidebarItem_'+ counter +'"><a href="javascript:click_sidebar(' + counter + ')">' + title + '<\/a><\/li>';
counter++;
return marker;
}
function isArray(a) {return isObject(a) && a.constructor == Array;}
function isObject(a) {return (a && typeof a == 'object') || isFunction(a);}
function isFunction(a) {return typeof a == 'function';}
function click_sidebar(idx) {
if(isArray(marker_html[idx])) { markers[idx].openInfoWindowTabsHtml(marker_html[idx]); }
else { markers[idx].openInfoWindowHtml(marker_html[idx]); }
}
function showInfoWindow(idx,html) {
map.centerAtLatLng(points[idx]);
markers[idx].openInfoWindowHtml(html);
}
function tohere(idx) {
markers[idx].openInfoWindowHtml(to_htmls[idx]);
}
function fromhere(idx) {
markers[idx].openInfoWindowHtml(from_htmls[idx]);
}
//]]>
</script>
iemand enig idee waarom het niet werkt. M.a.w. Er gebeurt niks, ik zie niks van de Google-maps.?
Alles bouw ik op met behulp van de GoogleMapAPI 2.5:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$map = new GoogleMapAPI();
$map->setAPIKey('ABQIAAAA3NgH3V4b_IoluUIWMkiDcRQjn6kX_b0ewkNs4RQqdETVqXFemhQ6Dr3Tf-KVHRZ1uxN1pQkEGztp3w');
$map->setWidth('600px');
$map->setHeight('800px');
// create some map markers
$map->addMarkerByAddress("Leidschendam",'<b>Werkplaats Leidschendam</b>');
$tpl->assign('google_map_header',$map->getHeaderJS());
$tpl->assign('google_map_js',$map->getMapJS());
$tpl->assign('google_map_sidebar',$map->getSidebar());
$tpl->assign('google_map',$map->getMap());
$map->setAPIKey('ABQIAAAA3NgH3V4b_IoluUIWMkiDcRQjn6kX_b0ewkNs4RQqdETVqXFemhQ6Dr3Tf-KVHRZ1uxN1pQkEGztp3w');
$map->setWidth('600px');
$map->setHeight('800px');
// create some map markers
$map->addMarkerByAddress("Leidschendam",'<b>Werkplaats Leidschendam</b>');
$tpl->assign('google_map_header',$map->getHeaderJS());
$tpl->assign('google_map_js',$map->getMapJS());
$tpl->assign('google_map_sidebar',$map->getSidebar());
$tpl->assign('google_map',$map->getMap());
Wat is er toch in hemelsnaam mis?
Mis ik iets in de HTML-code soms?
Oh, en waarom GMap2? Oftewel: waarom gebruik je versie 2.x, en niet 3?
Welke check op welke regel bedoel je?
Toevoeging op 01/10/2010 18:18:16:
Hier een voorbeeld waar het niet werkt:
http://www.clayweb.nl/test/kapot.html
Hier werkt het wel?
http://www.clayweb.nl/test/kapot2.html
Wat is er in hemelsnaam toch mis? Ik zit al dagen met dit probleem te emmeren?
Gewijzigd op 01/10/2010 18:34:21 door - Ariën -