I'm trying to make a custom marker that is an image. However, whenever I add "icon: image;" to my code, the map no longer shows up. Where did I go wrong?
var image = 'assets/marker.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.6700, -73.9400),
map: map,
icon: image;
});
Remove semi-column which is after "icon:image".
Related
I have a simple google maps , and I am creating a simple map with a marker with the below code:
var mapElement = document.getElementById('hr-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(25.098353, 55.156124),
map: map,
title: 'HR',
scrollwheel: false,
icon: 'images/res/map-marker.png'
});
Now all I wanted to do is move the marker from the center of the map to somewhere below the center, I googled and check the below two links, one is a SO question and the fiddle demonstrating changing the marker position.
FIDDLE HERE
SO THREAD
Now I used the same line of code used in the fiddle and also in the SO thread and wrote the below line of code:
marker.setPosition(google.maps.LatLng(25.098353, 55.156124));
But adding the above line of code actually makes the entire marker disappear. So now my code looks line below:
var mapElement = document.getElementById('dynamic-hr-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(25.098353, 55.156124),
map: map,
title: 'Dynamic HR',
scrollwheel: false,
icon: 'images/res/map-marker.png'
});
marker.setPosition(google.maps.LatLng(25.098353, 55.156124));
So well why is my marker disappearing in the first place ? Is there any solution to this ?
You are missing the new keyword. You need to create a new instance of LatLng object before using it.
marker.setPosition(new google.maps.LatLng(25.098353, 55.156124));
Noob here, trying to do something simple-yet-complicated. On this page I have succeeded in placing a red 52 of a certain size where I want it. I have done this by making my own changes to a no doubt familiar-looking code sample from the Google Developers site:
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-38.153470, 145.141425)
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'http://pollbludger.0catch.com/numbers/alp-52-07.png';
var myLatLng = new google.maps.LatLng(-38.148594, 145.126124);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
What I want to do now is add nine other markers at different points on the map, each different in some way from all the others. Like my red 52, each marker I propose to use has its own PNG stored at pollbludger.0catch.com. Can I just do this by coding each marker sequentially, rather than have it go through a loop?
You need use the property "icon" with "url" property and change the new coordinates in "position". use icons with the size of 32x32.
If you do not know how to get the positions use this example and copy the values lat,lng
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon : {
url: 'img/yourimageurl.png',//full path of your image
scaledSize: new google.maps.Size(30,40)//this control the size of your icon
}
});
I've got an issue, I can't make the marker clickable for my project. I've tried with google.com but nothing works. Can some one help me ?
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
<!--Add markers to map using previously specified locations-->
var marker = new google.maps.Marker({
position: myLatlng,
url:'http://www.google.com',
title: 'Tobermory Distillery',
map: map,
});
Thanks
you can bind onclick to markers like this:
google.maps.event.addListener(marker, 'click', function() {
location.href = 'http://www.google.com';
});
I try to change the color of part of the title, but look like the title option does not take html format. How can I make it work?
Thank you
var testtitle = '<font color="green">This is some text!</font> another text';
var marker = new google.maps.Marker({
position: location,
title: testtitle,
map: map
});
you must use InfoWindow object
see this doc google map api
var infowindow = new google.maps.InfoWindow({
content: "<span>any html goes here</span>"
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
A "title" is a tooltip that is automatically created for the google.maps.Marker object. It doesn't support HTML markup. If you want to create one that is different from the default, you can, but it would be custom.
See this post for one custom tool tip option (a google search found 2 posts describing them).
I'm using javascript and v3 of the maps API to pull some data from a Fusion Table. I've successfully added some custom markers to certain points but am now trying to get the markers I create to 'default' to the icon specified from a column in my tabled called 'Icon'. I'm NOT using a fusion tables layer but rather creating markers in a for loop from the data. The Icon column in my table has entries like: 'poi', 'star', etc...
Is there any way to use a name string to somehow get those 'default' icons like the fusion table layer would? Alternatively, does anyone know where I could find the absolute locations of the default fusion table icons (such as POI, and Star) so I could define the path to them in my script?
Here is some example code. If anyone knows the absolute URL's for the icons on google I could just write a function to input that based on the string from the 'Icon' column.
//if there's an image, use it as marker, else use default
if(row[3] != ''){
// Create the marker
var marker = new google.maps.Marker({
map: map,
position: coordinate,
icon: new google.maps.MarkerImage(row[3])
});
} else {
// Create the marker
var marker = new google.maps.Marker({
map: map,
position: coordinate
//icon: row[2] (row[2] is the Icon column.
// I'm assuming I'll just need a conditional to check
// for the name (such as 'poi') and then to put in the absolute URL for each respectively
// the problem is I don't know the absolute URL's for these icons. Thanks.
});
}
I was looking to do almost this same exact process. Though, what I did was simply have my column in the Fusion Table describe the marker, so, in your case, that would be "Poi," "Star," etc. Mine were "photo," "video," "song." Then, code as follows:
var image = new google.maps.MarkerImage('img/CF_Orange.png',
new google.maps.Size(25, 25),
new google.maps.Point(0,0),
new google.maps.Point(12.5,12.5));
var image2 = new google.maps.MarkerImage('img/CF_Purple.png',
new google.maps.Size(25, 25),
new google.maps.Point(0,0),
new google.maps.Point(12.5,12.5));
var image3 = new google.maps.MarkerImage('img/CF_Green.png',
new google.maps.Size(25, 25),
new google.maps.Point(0,0),
new google.maps.Point(12.5,12.5));
if(row[5] == 'photo'){
var marker = new google.maps.Marker({
map: map,
position: coordinate,
icon: image
});
} else if(row[5] == 'video'){
var marker = new google.maps.Marker({
map: map,
position: coordinate,
icon: image2
});
} else {
var marker = new google.maps.Marker({
map: map,
position: coordinate,
icon: image3
});
}