Google map image vervangen met eigen Image
die is de code voor Google maps :
Code (php)
1
https://www.google.nl/maps/place/Alsemstraat,+Hoogvliet+Rotterdam/@51.8656043,4.3428832,488m/data=!3m2!1e3!4b1!4m5!3m4!1s0x47c44a198df07bfb:0x5d5ec7ba6feeac8d!8m2!3d51.8656043!4d4.3450719!6m1!1e1?hl=nl
mij vraag is kan ik de standard Google map(image) vervangen met mij eigen Google map image(ik heb het van depositphoto.com gedownload) in javascript.
als ja wat ik moet doen precies om deze probleem op te lossen?
Dank U Wel
johannes
- Ariën -:
Titel aangepast naar iets korters. Probeer de titel zo kort en bondig te houden in het vervolg. Zo kan iedereen snel het probleem zien.
Gewijzigd op 05/02/2017 20:59:03 door - Ariën -
Hier is alles te vinden om Google maps aan te passen :
https://developers.google.com/maps/documentation/static-maps/intro
Kan daar overigens niets vinden om eigen kaart afbeeldingen te gebruiken.
Misschien kan je het proberen met een overlay.
https://developers.google.com/maps/documentation/javascript/custom-markers
Bedrijven gebruiken dit vaak om de standaard 'map marker' te vervangen door een logo voor hun filialen. Daarnaast kun je de pop-up met het 'info window' bij een marker uitbreiden met eigen data.
Info Windows:
https://developers.google.com/maps/documentation/javascript/infowindows
Ik ga deze sites bestuderen voor de mogelijkheden.
maar net als Adoptive solution zegt:
ik wil Google plattegrond vervangen door mij eigen plattegrond is dat mogelijk als ja,
hoe dan?
johannes
Misschien is SpryMap wat?
Gewijzigd op 27/01/2017 15:15:00 door - Ariën -
Ik denk niet dat je de plattegrond kan vervangen. Die bestaat uit tientallen vierkante afbeeldingen.
Je kan wellicht je eigen afbeeldingen er boven plaatsen.
De minimum html code voor een Google plattegrond is dit :
Code (php)
1
<div id="map-canvas"></div>
Je zou dan met DOM en Javascript in die div je eigen afbeeldingen kunnen zetten.
nu Ik weet voldoende.
johannes
Die is ook prima aanpasbaar en insluitbaar.
Een map-service waar ik heel content mee been (meer dan openstreetmaps.org) is www.mapbox.com
Voorbeeldje ga ik zo toevoegen:
Gewijzigd op 28/01/2017 10:05:12 door Eddy E
de code is om het kleur van google maps te veranderen e andere aspecten ook:
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html>
<head>
<title>Styled Map Types</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// Create a new StyledMapType object, passing it an array of styles,
// and the name to be displayed on the map type control.
var styledMapType = new google.maps.StyledMapType(
[
{elementType: 'geometry', stylers: [{color: '#ebe3cd'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{color: '#c9b2a6'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{color: '#dcd2be'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#ae9e90'}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#93817c'}]
},
{
featureType: 'poi.park',
elementType: 'geometry.fill',
stylers: [{color: '#a5b076'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#447530'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#f5f1e6'}]
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{color: '#fdfcf8'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#f8c967'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#e9bc62'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry',
stylers: [{color: '#e98d58'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry.stroke',
stylers: [{color: '#db8555'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#806b63'}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.fill',
stylers: [{color: '#8f7d77'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.stroke',
stylers: [{color: '#ebe3cd'}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{color: '#b9d3c2'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#92998d'}]
}
],
{name: 'Styled Map'});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.647, lng: 37.581},
zoom: 11,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map']
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBT9D_vumfzqZVDsU1L-aavClQ-kvTBukg&callback=initMap">
</script>
</body>
</html>
<html>
<head>
<title>Styled Map Types</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// Create a new StyledMapType object, passing it an array of styles,
// and the name to be displayed on the map type control.
var styledMapType = new google.maps.StyledMapType(
[
{elementType: 'geometry', stylers: [{color: '#ebe3cd'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{color: '#c9b2a6'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{color: '#dcd2be'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#ae9e90'}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#93817c'}]
},
{
featureType: 'poi.park',
elementType: 'geometry.fill',
stylers: [{color: '#a5b076'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#447530'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#f5f1e6'}]
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{color: '#fdfcf8'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#f8c967'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#e9bc62'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry',
stylers: [{color: '#e98d58'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry.stroke',
stylers: [{color: '#db8555'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#806b63'}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.fill',
stylers: [{color: '#8f7d77'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.stroke',
stylers: [{color: '#ebe3cd'}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{color: '#b9d3c2'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#92998d'}]
}
],
{name: 'Styled Map'});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.647, lng: 37.581},
zoom: 11,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map']
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBT9D_vumfzqZVDsU1L-aavClQ-kvTBukg&callback=initMap">
</script>
</body>
</html>
Deze voorbeeld staat op het URL:https://developers.google.com/maps/documentation/javascript/styling#styling_the_default_map
plus U moet U eigen API key aanvragen(via maps developer site) en plaatsen na key=:
Code (php)
1
2
3
2
3
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBT9D_vumfzqZVDsU1L-aavClQ-kvTBukg&callback=initMap">
</script>
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBT9D_vumfzqZVDsU1L-aavClQ-kvTBukg&callback=initMap">
</script>
als laatste U moetlat en Ing numers veranderen met u eigen adres lat Ing ummers.
het voorbeeld kunt u vinden op url:https://www.google.nl/
voer u eigen adres en daar boven in de URL balk u ziet als voorbeeld ( mij eigen adres):
https://www.google.nl/maps/place/Alsemstraat,+Hoogvliet+Rotterdam/@51.8656043,4.3428832,17z/data=!3m1!4b1!4m5!3m4!1s0x47c44a198df07bfb:0x5d5ec7ba6feeac8d!8m2!3d51.8656043!4d4.3450719.
u moet hier na @ 51.866043, als lat en 4.3428832 als ing kopieren en plaatsen in de code :\
Code (php)
1
center: {lat: 55.647, lng: 37.581}
Dank U Wel iedereen
johannes