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));
Related
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".
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
}
});
The following code show on a map a church and a priest:
var churchLatLng = new google.maps.LatLng(53.4, 0.14);
var mapOptions = {
center: churchLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
myMap = new google.maps.Map(document.getElementById('myDiv'), mapOptions);
var bounds = new google.maps.LatLngBounds();
// Setting church marker
new google.maps.Marker({
position: churchLatLng,
map: myMap,
});
bounds.extend(churchLatLng);
var priestLatLng = new google.maps.LatLng(51.2,0.13);
new google.maps.Marker({
position: priestLatLng,
map: myMap
});
bounds.extend(priestLatLng);
myMap.fitBounds(bounds);
The code use both the option "center" to center the church at the center of the map, and the function "fitBounds" to fit all the markers (church and priest only in this case).
The result is that the map border is set to encompass the two markers, but the option "center" doesn't work anymore and is ignored.
What I want is setting the bounds, but at the same time showing the church at the centre of the map.
How can I accomplish this?
call myMap.fitBounds to set the bounds to show all the markers.
change the map to center where you like (on the church)
add a listener to the bounds_changed event, when that fires, check to see if the map bounds contains the priest marker, if it does, you are done.
if the priest marker is not contained by the map bounds, zoom out one level (map.setZoom(map.getZoom()-1)).
myMap.fitBounds(bounds);
google.maps.event.addListenerOnce(myMap,'bounds_changed',function() {
google.maps.event.addListenerOnce(myMap, 'center_changed', function() {
if (!myMap.getBounds().contains(priestLatLng)) {
myMap.setZoom(myMap.getZoom()-1);
}
});
myMap.setCenter(churchLatLng);
});
Try to use an eventlistener and wait for the bounds to change (it works asynchronous).
Something like:
google.maps.event.addListenerOnce(myMap, 'bounds_changed', function(event) {
myMap.setCenter(churchLatLng);
});
The code in example 1 works. I would like to understand the marker.setIcon(); function more (new to JavaScript also).
My question is. In the documentation for Google maps you see something like this for changing the marker.
MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
How does this relate to what I have done in example 1 for setting up marker Icon, shoud I have done somethign like this instead?
marker = google.maps.MarkerImage({
url: "newIcon.png"
});
marker.setIcon(marker);
and would that have worked?
here is my example
Example 1
function initialize(){
//MAP
var latlng = new google.maps.LatLng('xxx','xxx');
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
//GEOCODER
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
marker.setPosition(latlng);
marker.setIcon("newIcon.png");
map.setCenter(latlng);
}
You're giving a V2 answer for a V3 question.
There is no GIcon in V3.
var image = new google.maps.MarkerImage("newIcon.png");
Can be used inside your marker as the icon.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
icon:image
});
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
});
}