I'm trying to learn myself some more advanced code writing. And this week I'm learning about google maps and how to customize it.
I think I'm doing fine, but I have a problem with making an icon marker show on the actual website.
The program I use to make the website is dreamweaver and in the live view option the customized map and icon are both showing correctly. However, when I go to the actual website, the icon is missing. There is no marker at all on the google map. I could really use some help with this one.
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var styles = [
{
stylers: [
{ hue: "#0D6C91" },
{ saturation: 0 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}
];
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.834250, 4.309755),
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('column_links'),
mapOptions);
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var image = '3. afbeeldingen/RLogo.png';
var myLatlng = new google.maps.LatLng(51.834250, 4.309755);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Related
I have this code in javascript and html, everything works perfectly but i tried many way to remove markers in google maps. Help me, thank you !
<script type="text/javascript">
function initialize() {
var markers = [
{
"title": 'ABC',
"lat": '19.1759668',
"lng": '72.79504659999998',
"description": 'ZXVZXV'
},
{
"title": 'ASDASD',
"lat": '19.0883595',
"lng": '72.82652380000002',
"description": 'ZXVZXA.'
},
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 25,
center: new google.maps.LatLng(19.1759668, 72.79504659999998),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
mapTypeId: 'satellite'
});
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
You could use top window array of markersObject eg markersObj store the markers object inside and then looping for set null or set map
<script type="text/javascript">
var markersObj = [];
var map;
function initialize() {
var markers = [
{
"title": 'ABC',
"lat": '19.1759668',
"lng": '72.79504659999998',
"description": 'ZXVZXV'
},
{
"title": 'ASDASD',
"lat": '19.0883595',
"lng": '72.82652380000002',
"description": 'ZXVZXA.'
},
];
map = new google.maps.Map(document.getElementById('map'), {
zoom: 25,
center: new google.maps.LatLng(19.1759668, 72.79504659999998),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
mapTypeId: 'satellite'
});
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
});
markersObj.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function hideMarkers() {
nElem = markersObj.length
for (i=0; i< nElem; i++){
markersObj[i].setMap(null);
}
}
function showMarkers() {
nElem = markersObj.length
for (i=0; i< nElem; i++){
markersObj[i].setMap(map);
}
}
....
You need two buttons that call hideMarkers or showMarkers respectively
I have just started dabbling in Google Maps API, but I am already stuck. I am looking for a way to recreate this type of map with google maps. I would need to remove all labels, get a blank background (I tried using a map style, but that didn't work for me, code example below) and light up the countries as I hover over them.
Are there any tutorials that I seem to have missed in my search that could help me or can anyone point me in the right direction? :)
var _mapstyle = [
{
featureType: "all",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
function create_map()
{
_map = new google.maps.Map(document.getElementById("eyewebz-map"),
{
zoom: 2,
center: new google.maps.LatLng(20, 0),
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
scaleControl: true,
mapTypeIds: ['_mapstyle']
});
_display.setMap(_map);
_display.setPanel(document.getElementById("NavigationText"));
}
EDIT
This is what the map would be used for: I have traveled a bit in my life and expect to do a lot more of it. Since my first big trip, I have been keeping a blog. I have now developed a new blog and I would like to make the countries that I've been to clickable and follow a url once they have been clicked. The ideal situation would be that when I click a country, it takes me to a page where only that specific country is shown in a map with some markers (places to visit). Once you click those markers, it should show a specific post/some information.
Something like this would be ok? Copy and paste inside a HTML page body (JSFiddler here).
<style type="text/css">
#map-canvas {
height: 600px;
width: 800px;
}
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// the map
var map;
function initialize() {
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// initialize the map
map = new google.maps.Map(document.getElementById('map-canvas'),
myOptions);
// these are the map styles
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},
{
featureType: "landscape",
stylers: [
{ hue: "#ffff66" },
{ saturation: 100 }
]
},{
featureType: "road",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.land_parcel",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.locality",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.neighborhood",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.province",
stylers: [
{ visibility: "off" }
]
},{
featureType: "landscape.man_made",
stylers: [
{ visibility: "off" }
]
},{
featureType: "landscape.natural",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
},{
featureType: "transit",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({styles: styles});
// Initialize JSONP request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
url.push('sql=');
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap');
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: '#ff9900',
strokeOpacity: 1,
strokeWeight: 0.3,
fillColor: '#ffff66',
fillOpacity: 0,
name: rows[i][0]
});
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 0.4});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0});
});
google.maps.event.addListener(country, 'click', function() {
alert(this.name);
});
country.setMap(map);
}
}
}
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
This is a modified version of this
Fusion Tables Layer Example: Mouseover Map Styles.
You should also take a look to Styled Maps.
Another thing you may be interested in is Natural Earth Data. This in the case you need a polygon data source. And here an example of using it GViz API Example: Fusion Tables Data Source.
As the fusion tables are deprecated there is no inbuilt google solution to do this.
Here is small sample code that i made:
https://github.com/arturssmirnovs/Clickable-countries-using-Google-Maps-API
and working sample here: https://arturssmirnovs.github.io/Clickable-countries-using-Google-Maps-API/json/
I am creating a simple google map with heatmap layer. Importantly, I am not setting the data property of the heatmap initially:
var map, heatmap;
var home = new google.maps.LatLng(37.75, -122.4)
function initialize() {
var mapOptions = {
zoom: 10,
minZoom: 3,
center: home,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
};
var styles = [
{
stylers: [
{ "gamma": 0.83 },
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.setOptions({styles: styles});
heatmap = new google.maps.visualization.HeatmapLayer({
radius: 20,
opacity: 0.5
});
heatmap.setMap(map);
then I create a function which should set the data property of the heatmap, like this:
function update(){
all = [[37.782551, -122.445368, 0.75, 0.25],
[37.782745, -122.444586, 0.5, 0.5],
[37.782842, -122.443688, 0.2, 0.8]]
temp = []
for (var i = 0; i < all.length; i++){
temp.push(new google.maps.LatLng(all[i][0], all[i][1]), all[i][2])
}
var newdata = new google.maps.MVCArray(temp);
heatmap.set('data', heatmap.get('data') ? null : newdata)
}
finally, i call the update function in a bounds_changed event and initialize the map:
google.maps.event.addListener(map, 'bounds_changed', function() {
update;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
However, when I inspect the heatmap variable in the console, the data property is null. Why is this? and how do I set the data property in a function call?
calling heatmap.set('data', heatmap.get('data') ? null : newdata); is problematic.
Remove that and it works.
working fiddle
I have a problem with my marker in Google Maps. This is my code:
var map;
var geocoder;
var current;
var styles = [
{
stylers: [
{ hue: "#00c0eb" },
{ saturation: -10 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
}
];
var NewEventMarker;
function changeMarkerPosition(marker, ll) {
marker.setPosition(ll);
}
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
scaleControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
map.setOptions({styles: styles});
google.maps.event.addListener(map, 'click', addNewEvent);
}
function codeAddress() {
var address = "London";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var image = new google.maps.MarkerImage("/img/markers/user-m.png",
new google.maps.Size(32.0, 49.0),
new google.maps.Point(0, 0),
new google.maps.Point(16.0, 24.0)
);
var marker = new google.maps.Marker({
map: map,
icon: image,
flat: false,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function addNewEvent(event){
var NEMlatLng;
if(NewEventMarker == undefined){
NewEventMarker = new google.maps.Marker({
map: map,
draggable: true,
icon: "/img/markers/marker-add.png",
position: event.latLng,
title: "Добавить событие"
});
} else {
changeMarkerPosition(NewEventMarker, event.latLng);
}
google.maps.event.addListener(NewEventMarker,'dragend',function(event) {
alert(event.latLng);
});
}
The idea of this code is when user clicks on a map, start work function - addNewEvent, and as you can see, if there is already exists "NewEventMarker", it just moves this marker to a place where user clicks, and if there are no marker, it creates. So if you try my code you can see, that if i click, for example two or three times on a map, marker will moves, but when i drag my marker, starts work function that assigned to 'dragend' event. But it will be works so many times, how much i clicked on a map. How can i fix it?
When i try to add google.maps.event.addListener(NewEventMarker,'dragend'....... to other places in my code i get an error: Cannot read property '_e3' of undefined
Please help me ;)
Evgeny, you did almost everything right but for each click you attach new event handler for dragend. Because of that you got several dragend events and for each event one alert.
Solution is to just move event handler to if statement and add event listener only in case if NewEventMarker is created (only first time):
function addNewEvent(event){
var NEMlatLng;
if (NewEventMarker == undefined){
NewEventMarker = new google.maps.Marker({
map: map,
draggable: true,
icon: "marker-add.png",
position: event.latLng,
title: "Добавить событие"
});
google.maps.event.addListener(NewEventMarker, 'dragend', function(event) {
alert(event.latLng);
});
} else {
changeMarkerPosition(NewEventMarker, event.latLng);
}
}
I understand how to initialise a map with custom styles like the following:
var styles = [
{
featureType: "water",
stylers: [
{ visibility: "on" },
{ color: "#ffffff" }
]
}
];
var mapOptions = {
zoom: 13,
maxZoom: 15,
minZoom: 12,
center: new google.maps.LatLng(50.924229,-1.396841),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
styles: styles
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
But is it possible to change to another style once the map has already been initialised? For example changing the colours of the map when certain events are triggered?
Yes. just use
map.setOptions(mapOptions);
Yes, create a new style object and then change the style by setting the option:
map.setOptions({styles: styles});