I am trying to direct multiple polylines to a particular marker in a map.
I am able to draw the polylines to the marker but when I try to animate the same only the last polyline is working. The link below shows the map I made.
http://jsbin.com/ihugur/1/edit
Also this is the code:
<html>
<head>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: 100%
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdTuWJjEUMvQZ6VVPGksE12XNgQgs__Qk&sensor=false&libraries=visualization"></script>
<script language="javascript">
var line;
var myLatlng = new google.maps.LatLng(41.7833, 5.2167);
var marker;
function initialize(){
var styles = [
{
"featureType": "administrative.country",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "on" },
{ "color": "#C0C0C0" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" },
{ "color": "#FFFFFF" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
{ "visibility": "off" },
{ "color": "#efffff" }
]
},{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
}
];
var symbolOne = {
strokeColor: '#F00',
fillColor: '#F00',
fillOpacity: 1
};
var domain = [new google.maps.LatLng(11.2583, 75.1374)];
var markers = [];
var mapOptions = {
zoom:2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
opacity: 0.2,
disableDefaultUI: true,
draggable: false,
styles: styles
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var lineCoordinates = [
new google.maps.LatLng(53.215556, 56.949219),
new google.maps.LatLng(75.797201, 125.003906),
new google.maps.LatLng(37.7833, 144.9667),
new google.maps.LatLng(-24.797201, 26.003906),
new google.maps.LatLng(27.797201, -101.003906)
];
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};
for(i=0;i<lineCoordinates.length;i++){
markers.push(new google.maps.Marker({
position: lineCoordinates[i],
map: map,
}));
line = new google.maps.Polyline({
path: [lineCoordinates[i], domain[0]],
strokeOpacity: 0.8,
strokeWeight:2,
strokeColor: '#f00',
geodesic: true,
icons: [{
icon: lineSymbol,
offset: '100%',
repeat: '30px'
}]
});
line.setMap(map);
} //end of for loop
animate();
} //end of initialize function
function animate(){
var count = 0;
offsetId = window.setInterval(function(){
count = (count + 1) % 2000;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 200);
}// end of animate function
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 1000px; height: 675px; margin-left: 400px; margin-top: 38px;"></div>
</select>
</body>
</html>
Could anyone help me fixing this problem.
Thanks in advance.
Make an array to hold all your polylines:
var lines = [];
push your existing line(s) on that array:
lines.push(line);
Process through them updating the icons.
function animate(){
var count = 0;
offsetId = window.setInterval(function(){
count = (count + 1) % 2000;
for (var i=0; i<lines.length; i++) {
var icons = lines[i].get('icons');
icons[0].offset = (count / 2) + '%';
lines[i].set('icons', icons);
}
}, 200);
}// end of animate function
example
code snippet:
var line;
var lines = [];
var myLatlng = new google.maps.LatLng(41.7833, 5.2167);
var marker;
function initialize() {
var styles = [{
"featureType": "administrative.country",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"stylers": [{
"visibility": "on"
}, {
"color": "#C0C0C0"
}]
}, {
"featureType": "water",
"stylers": [{
"visibility": "on"
}, {
"color": "#FFFFFF"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "off"
}, {
"color": "#efffff"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}];
var symbolOne = {
strokeColor: '#F00',
fillColor: '#F00',
fillOpacity: 1
};
var domain = [new google.maps.LatLng(11.2583, 75.1374)];
var markers = [];
var mapOptions = {
zoom: 1,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
opacity: 0.2,
disableDefaultUI: true,
draggable: false,
styles: styles
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var lineCoordinates = [
new google.maps.LatLng(53.215556, 56.949219),
new google.maps.LatLng(75.797201, 125.003906),
new google.maps.LatLng(37.7833, 144.9667),
new google.maps.LatLng(-24.797201, 26.003906),
new google.maps.LatLng(27.797201, -101.003906)
];
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};
for (i = 0; i < lineCoordinates.length; i++) {
markers.push(new google.maps.Marker({
position: lineCoordinates[i],
map: map
}));
line = new google.maps.Polyline({
path: [lineCoordinates[i], domain[0]],
strokeOpacity: 0.8,
strokeWeight: 2,
strokeColor: '#f00',
geodesic: true,
icons: [{
icon: lineSymbol,
offset: '100%',
repeat: '30px'
}]
});
line.setMap(map);
lines.push(line);
} //end of for loop
// alert(lines.length);
animate();
} //end of initialize function
function animate() {
var count = 0;
offsetId = window.setInterval(function() {
count = (count + 1) % 2000;
for (var i = 0; i < lines.length; i++) {
var icons = lines[i].get('icons');
icons[0].offset = (count / 2) + '%';
lines[i].set('icons', icons);
}
}, 200);
} // end of animate function
google.maps.event.addDomListener(window, 'load', initialize);
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100% margin: 0;
padding: 0
}
#map_canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width: 100%; height: 100%; "></div>
Related
i am not sure if this is possible, but i would like to add a semi transparent layer over a map. Then place text over the layer. I have tried the following, but the layer is behind the map instead of over it and so is the text, how do i get around this?
/*GOOGLE MAPS*/
section#map {
width: 100%;
height: 250px;
}
/*layers*/
.layer {
background-color: black;
opacity: 0.5;
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
/*netscape*/
filter: alpha(opacity=50);
/*IE*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*IE 8*/
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<section id='map'>
<div class="layer">
<h3 id="area">Restaurants delivering to</h3>
<script type="text/javascript">
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(40.6700, -73.9400), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{
"featureType": "all",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#f3f4f4"
}]
}, {
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [{
"weight": 0.9
}, {
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#83cead"
}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#fee379"
}]
}, {
"featureType": "road.arterial",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#fee379"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#7fc8ed"
}]
}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.6700, -73.9400),
map: map,
title: 'Snazzy!'
});
}
</script>
<!-- FLAT DESIGN MAP -->
</section>
</div>
Only the map shows and nothing else in the browser. But i want it to look like this.
If you give your main section position relative like below, you can then give your layer position absolute including top and left values, as seen below, also as opposed to reducing the opacity of the layer just use an rgba value in your background-color instead:
** Also I would move the h3 out of the map section and put it above.
/*GOOGLE MAPS*/
section#map {
width: 100%;
height: 250px;
position:relative;
margin:auto;
}
/*layers*/
.layer {
background-color: rgba(0,0,0,0.5);
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
h3 {
width:100%;
position:relative;
z-index:999;
}
<section id='map'>
<div class="layer">
<h3 id="area">Restaurants delivering to</h3>
<script type="text/javascript">
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(40.6700, -73.9400), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{
"featureType": "all",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#f3f4f4"
}]
}, {
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [{
"weight": 0.9
}, {
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#83cead"
}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#fee379"
}]
}, {
"featureType": "road.arterial",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#fee379"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#7fc8ed"
}]
}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.6700, -73.9400),
map: map,
title: 'Snazzy!'
});
}
</script>
<!-- FLAT DESIGN MAP -->
</section>
</div>
What is the correct way to specify the stroke color inline, for each Feature object in the constructor of a FeatureCollection GeoJSON object? I am trying many ways to set it blue below, but the result is still the default black stroke color. Thanks!
Fiddle
<head>
<title>LineString Colors</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 33.9720, lng: -81.0527},
zoom: 6
});
map.data.addGeoJson({
"type": "FeatureCollection",
"features": [
{"type": "Feature",
"geometry":
{"type": "LineString",
"coordinates": [[-81.0527, 33.9720],
[-79.6651, 34.9167],
[-85.0252, 38.6221]],
"strokeColor": "#0000FF",
},
"strokeColor": "#0000FF",
"style": {"strokeColor": "#0000FF"}
}
],
"strokeColor": "#0000FF"
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
See the documentation on Styling GeoJson data
If you just want all the polylines to be blue, all you have to do is:
map.data.setStyle(function (feature) {
return {
strokeColor: "#0000FF"
};
});
But, if as you imply in your title, you want to specify the colors in the GeoJSON, you can set strokeColor in the properties of the feature, then you can retrieve it with getProperty:
var strokeColor = feature.getProperty('strokeColor');
Then use that to set the color of the polyline dynamically:
map.data.setStyle(function (feature) {
var strokeColor = feature.getProperty('strokeColor');
return {
strokeColor: strokeColor,
strokeWeight: 2
};
});
proof of concept fiddle
code snippet:
var map;
function initMap() {
var gbounds = new google.maps.LatLngBounds();
gbounds.extend(new google.maps.LatLng(33.9720039368, -81.052734375));
gbounds.extend(new google.maps.LatLng(34.9167518616, -79.6651229858));
map = new google.maps.Map(document.getElementById('map'), {
center: gbounds.getCenter(),
zoom: 6
});
map.data.setStyle(function(feature) {
var strokeColor = feature.getProperty('strokeColor');
return {
strokeColor: strokeColor,
strokeWeight: 2
};
});
map.data.addGeoJson({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-81.052734375, 33.9720039368],
[-79.665122985799997, 34.916751861599998],
[-85.025260925300003, 38.622150421100002]
],
},
properties: {
"strokeColor": "#0000FF"
}
}, {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-80.1, 33.9],
[-79.6, 34.916751861599998],
[-85.1, 39.6]
],
},
properties: {
"strokeColor": "#FF0000"
}
}]
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<title>LineString Colors</title>
<div id="map"></div>
Been on this for a while now, I need to make the map height 100% of its container. And also keep it centred when its resizing.
I have tried nearly all of the examples on here with no avail..
The code example below shows what I am using, there's markers and infowindows in there and also custom marker symbols too. I don't get any errors in the console.
<script type="text/javascript">
var markers = [
{
"title": 'xxxxx School',
"lat": '53.004758',
"lng": '-2.241232',
"description": '<br/>View more info',
"type": 'UK Independent School'
},
{
"title": 'xxxxx Prep',
"lat": '51.470123',
"lng": '-0.209838',
"description": '<br/>View more info',
"type": 'UK Independent School'
},
{
"title": 'xxxxxx',
"lat": '46.709741',
"lng": '9.159625',
"description": '<br/>View more info',
"type": 'Swiss Boarding School'
},
{
"title": 'xxxxxxx independent College',
"lat": '51.512103',
"lng": '-0.308055',
"description": '83 New Broadway, <br/>London W5 5AL, <br/>United Kingdom <br/>View more info',
"type": 'UK Independent School'
},
{
"title": 'xxxxxxx Hill',
"lat": '51.007720',
"lng": '0.217913',
"description": 'Five Ashes, <br/>Mayfield, <br/>East Sussex <br/>TN20 6HR, <br/>United Kingdom <br/>View more info',
"type": 'UK Independent School'
}
];
var map;
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(51.507351, -0.127758),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"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 infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var i = 0;
var interval = setInterval(function () {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
switch (data.type) {
case "UK Independent School":
icon = "orange";
break;
case "Swiss Boarding School":
icon = "green";
break;
}
icon = "http://fokn.temp-dns.com/images/site/icon-" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon)
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent("<div style = 'width:200px;min-height:40px'><strong>" + data.title + "</strong><br/>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
</script>
<div style="width:100%; height:100%;">
<div id="dvMap" style="width:100%; height:100%;"></div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY-API&callback=initMap"></script>
You need to give sizes to all the elements up to the <html> element:
html, body, #dvMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
Mike Williams' Google Maps Javascript API v2 page on this subject: Using a percentage height for the map div
proof of concept fiddle
code snippet:
var markers = [{
"title": 'xxxxx School',
"lat": '53.004758',
"lng": '-2.241232',
"description": '<br/>View more info',
"type": 'UK Independent School'
}, {
"title": 'xxxxx Prep',
"lat": '51.470123',
"lng": '-0.209838',
"description": '<br/>View more info',
"type": 'UK Independent School'
}, {
"title": 'xxxxxx',
"lat": '46.709741',
"lng": '9.159625',
"description": '<br/>View more info',
"type": 'Swiss Boarding School'
}, {
"title": 'xxxxxxx independent College',
"lat": '51.512103',
"lng": '-0.308055',
"description": '83 New Broadway, <br/>London W5 5AL, <br/>United Kingdom <br/>View more info',
"type": 'UK Independent School'
}, {
"title": 'xxxxxxx Hill',
"lat": '51.007720',
"lng": '0.217913',
"description": 'Five Ashes, <br/>Mayfield, <br/>East Sussex <br/>TN20 6HR, <br/>United Kingdom <br/>View more info',
"type": 'UK Independent School'
}];
var map;
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(51.507351, -0.127758),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"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 infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var i = 0;
var interval = setInterval(function() {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
switch (data.type) {
case "UK Independent School":
icon = "orange";
break;
case "Swiss Boarding School":
icon = "green";
break;
}
icon = "http://maps.google.com/mapfiles/ms/micons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
icon: icon
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent("<div style = 'width:200px;min-height:40px'><strong>" + data.title + "</strong><br/>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#dvMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div style="width:100%; height:100%;">
<div id="dvMap"></div>
</div>
I am having a little trouble with implementing the Google Maps APi styled map, I can get the location and custom marker working, by removing the var styles & map.setoptions) but soon as I try to add the google styles coding back in the map no longer works, any ideas??
<script type="text/javascript">
function initialize() {
var styles = [
{
featureType: "water",
elementType: "geometry.fill",
stylers: [
{ color: "#73b6e6" }
]
},{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{ color: "#ffffff" }
]
},{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [
{ color: "#c8c8c8" }
]
},{
featureType: "road.local",
stylers: [
{ color: "#ffffff" }
]
},{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [
{ color: "#ffffff" }
]
},{
featureType: "road.arterial",
elementType: "geometry.stroke",
stylers: [
{ color: "#c8c8c8" }
]
},{
featureType: "road.highway",
elementType: "labels.text.stroke",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road.arterial",
elementType: "labels.text.stroke",
stylers: [ { visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [ { "visibility": "off" }
]
},{
featureType: "poi.park",
stylers: [ { color: "#cae6a9" }
]
},{
featureType: "administrative.neighborhood",
elementType: "labels.text.fill",
stylers: [ { "visibility": "off" }
]
}
];
map.setOptions({styles: styles});
var mapOptions = {
center: new google.maps.LatLng(-34.94533,138.58934),
zoom: 14,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("location-map"),
mapOptions);
var image = 'images/main/location.png';
var myLatLng = new google.maps.LatLng(-34.94533,138.58934);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
};
</script>
HTML Code
<div id="location-map" style="background-color: #E5E3DF; overflow: hidden;">
</div>
the map var does not exist before you create, yet you are calling map.setOptions before this line:
var map = new google.maps.Map(document.getElementById("location-map"),
mapOptions);
Just move this line:
map.setOptions({styles: styles});
after this one:
var map = new google.maps.Map(document.getElementById("location-map"),
mapOptions);
I'm struggling to find a way to style the infowindows on this map. I've tried suppressing the infowindow by setting suppressInfoWindows: true but that didn't seem to work. Any ideas would be massively appreciated. I've read through a lot of Google docs and a lot of other posts on here and can't find a solution.
<script>
var geocoder;
var map;
var marker;
var layers = [];
function initialize() {
geocoder = new google.maps.Geocoder ();
var latlng = new google.maps.LatLng (51.505288, -0.191544);
var myOptions = {
zoom: 15,
disableDefaultUI: true,
styles: [
{
stylers: [
]
},
{
featureType: "poi.park",
stylers: [
{ color: "#aecfae" },
{ saturation: 0 },
{ lightness: 0 },
{ visibility: "simplified" }
]
},
{
featureType: "landscape",
stylers: [
{ color: "#ffffff" },
{ saturation: 0 },
{ lightness: 0 },
{ visibility: "simplified" }
]
},
{
featureType: "road.highway",
elementType: "labels",
stylers: [
{ color: "transparent" },
{ visibility: "off" },
]
},
{
featureType: "water",
elementType: "geometry.fill",
stylers: [
{ color: "#a5bfdd" },
{ visibility: "on" },
]
},
{
featureType: "road",
elementType: "labels",
stylers: [
{ color: "transparent" },
{ visibility: "off" },
]
},
{
featureType: "road",
elementType: "geometry",
stylers: [
{ color: "#e0e0e0" },
{ saturation: 0 },
{ lightness: 0 },
{ visibility: "simplified" }
]
}],
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
marker = new google.maps.Marker({map:map});
layers[0] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/VicarageGate.kml', {preserveViewport: true});
for (var i = 0; i < layers.length; i++) {
layers[i].setMap(map);
}
layers[1] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/PrimarySchools-1.kml',
{preserveViewport: true});
layers[2] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/SecondarySchools-1.kml', {preserveViewport: true});
layers[3] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/Culture-6.kml', {preserveViewport: true});
layers[4] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/Hotels-2.kml', {preserveViewport: false});
layers[5] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/Shopping.kml', {preserveViewport: false});
layers[6] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/Restaurants.kml', {preserveViewport: false});
for (var i = 1; i < layers.length; i++) {
layers[i].setMap(null);
}
}
function codeAddress () {
var address = document.getElementById ("address").value;
geocoder.geocode ( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results [0].geometry.location);
marker.setPosition(results [0].geometry.location);
map.setZoom(15);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function toggleLayer(i) {
if(layers[i].getMap() === null) {
layers[i].setMap(map);
}
else {
layers[i].setMap(null);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas" style="position:absolute; width:100%; height:100%; top:0px; left:0px; right:0px; bottom:0px; z-index:100; background-color:#000;"></div>
Suppress the automatic info window generation, and use the click event to manually handle the data.
Here's an example that is removing the target="_blank" attribute from the info window links: http://people.missouristate.edu/chadkillingsworth/mapsexamples/removekmllinktargets.js
You can try adding a method like this to all your markers.
// generalized click handler
function addClickHandler(item, content, position) {
google.maps.event.addListener(item, 'click', function () {
infoWindow.close();
infoWindow.setContent(content);
infoWindow.setPosition(position);
infoWindow.open(map);
});
}
When I am styling with KML anything passed through in <[CDATA tag is formatted. So adding within the cdata is allowed.
Also heres an example from GOOGLE
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html