I have a Google Map on my website and I am also using a Custom marker to mark the location of the business. I want to bring the icon about 100px to the left as it's currently center of the map... How can I do this?
My code:
function initMap() {
var LatLng = {
lat: REMOVED, lng: REMOVED
};
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: LatLng
});
var image = 'REMOVED';
var customMarker = new google.maps.Marker({
position: LatLng,
map: map,
icon: image
});
}
You've almost done. The problem is that you are centering the map in the same position than your marker.
So, set another LatLang for your marker or center the map in another position.
var markerLatLang={lat: WHATEVER, lng: WHATEVER}
var customMarker = new google.maps.Marker({
position: markerLatLang,
map: map,
icon: image
});
Checkout this for further information.
Related
Hi Im working with HTML5 and I have a simple js function where i set the center of my map and the zoom:
function goToMaxZoom(){
var map=new google.maps.Map(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(12.32323, -3.683639) );
map.setZoom(16);}
everything is going good except for the map markers, they are not displayed
i tryed also to add:
marker.setMap(map);
to make a new one but it doesnt work, even if i add the whole marker build:
var map=new google.maps.Map(document.getElementById("map"),mapProp);
var marker=new google.maps.Marker({
position:(12.32323, -3.683639),
});
So i think im missing something.
Thanks in advance
You will need to create an object of LatLng before adding it to the marker as shown below
var myLatLng = new google.maps.LatLng(12.32323, -3.683639)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
You can also create the LatLng object using the following constructor
var myLatLng = new google.maps.LatLng({lat: 12.32323, lng: -3.683639});
OR
var myLatLng = {lat: 12.32323, lng: -3.683639};
All three are valid ways to create a LatLng object
This is my code
var map_canvas = document.getElementById('map_canvas');
var map_options = { center: new google.maps.LatLng(44.5403, -78.5463), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(map_canvas, map_options);
google.maps.event.addListener(map, 'click', function(event) {
if(marker){
marker.setMap(null);
}
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
$("#latitude").val(event.latLng.lat());
$("#longitude").val(event.latLng.lng());
map.setCenter(event.latlng);
});
console.log($("#longitude").val());
if (($("#latitude").val()) && ($("#longitude").val())){
var point = new google.maps.LatLng(($("#latitude").val()), ($("#longitude").val()));
marker = new google.maps.marker({
position: point,
map: map
});
map.setCenter(point, 8);
}
please notice that I have added a listener for on click on the map to add the marker, and it is working. I mean when I click on the map, the marker appears.
However, when I submit the page, and if there is an error in the inputs, I return the page back to the user. In that case, if the use has added a map, I wanted to create the map for him. that is why I used this code:
console.log($("#longitude").val());
if (($("#latitude").val()) && ($("#longitude").val())){
var point = new google.maps.LatLng(($("#latitude").val()), ($("#longitude").val()));
marker = new google.maps.marker({
position: point,
map: map
});
map.setCenter(point, 8);
however, i got exception Uncaught TypeError: undefined is not a function in the line marker = new google.maps.marker({ could you help please?
Make sure you use the right capitalization for Google Maps API function names, google.maps.marker should be google.maps.Marker.
I cannot get markers to show up on my google map, here is my code below, what do I need to fix? Thanks.
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(37.661932, -94.306856),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var myMarker = new google.maps.Marker({
position: LatLng(37.661932, -94.306856),
title: "About.com Headquarters"
});
var latlng2 = new google.maps.LatLng(37.661932, -94.306856);
var myMarker2 = new google.maps.Marker({
position: latlng2,
map: map,
title: "Apple Computer"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
There are two problems with your first marker "myMarker". You are not specifying a map, and you are not instantiating the "LatLng" object, as you should be doing. Changing the first marker like this should fix the issue:
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(37.661932, -94.306856),
map: map,
title: "About.com Headquarters"
});
The second marker looks fine. The first marker is probably throwing an error, which is causing the second marker not to show up as well.
I am creating a google map in a script with the following code -
var mapElement,
parent,
mapOptions,
map,
marker,
latLong,
openMarker;
parent = document.getElementsByClassName('parent')[0];
mapElement = document.createElement('div');
latLong = new google.maps.LatLng(some_lat_from_db, some_long_from_db);
mapOptions = {
center: latLong,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapElement, mapOptions);
marker = new google.maps.Marker({
position: latLong,
map: map,
title: 'some title'
});
openMarker = function () {
var infowindow = new google.maps.InfoWindow();
infowindow.setContent('Some Content');
infowindow.open(map, marker);
};
google.maps.event.addListener(marker, 'click', openMarker);
parent.appendChild(mapElement);
openMarker();
When using this code, the infowindow that opens up by default goes outside the map viewport, so it's not visible. I first tried to reduce the size of the info window but that didn't work out. So I thought to move the center of the map a bit so that the info window remains in the viewport.
So, how can I move the center by some pixels so that the info window remains in the viewport?
You can use .setCenter() to move the center of the map
map.setCenter(marker.getPosition());
Update
Convert the LatLng with .fromLatLngToDivPixel() into a Point add an offset and convert it back into a LatLng with .fromDivPixelToLatLng()
forget all that crap this is what works if you want to reuse a google map marker or move a google map marker, or recenter a google map marker.
var lo = <yourval>;
var la = <yourval>;
var midpoint = {lat:la, lng:lo };
marker.setPosition(midpoint);
if you want to destroy a google maps marker or delete a google maps marker
marker.setMap(null);
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
});