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
});
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.
Is there a way to hyperlink a custom marker on google maps marker to its coordinates on Google Maps itself? In this case link to LatLng. Also, is there a way to open it in a new tab using target="_blank" or javascript with the same effect?
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(-29.528000, 31.194881)
}
var map = new google.maps.Map(document.getElementById('ContactMap'),
mapOptions);
var image = '/Assets/Images/Pages/Marker.png';
var myLatLng = new google.maps.LatLng(-29.528000, 31.194881);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
A real hyperlink is not possible, but of course you may set up a click-listener to achieve a similar behaviour:
google.maps.event.addListener(beachMarker,'click',function(){
window.open('https://maps.google.com/maps?q=' +
this.getPosition().toUrlValue() +
'&z='+this.getMap().getZoom(),'google');
});
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 just started using the version 3 of the google maps api, and i am making a simple implementation of clustering, but i cant make it work. Maybe you can see where is my error, and help me making it work:
var map;
function runmap() {
//Prepare cordinates
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
//Prepare other options
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
//,disableDefaultUI: true//Uncoment to disable map controls
};
//Prepare map using de destination id(in the html page) and the options
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//Adding markers(Search marker options for more options)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Zdravo",
icon:"djole.png"//Change the icon of the marker
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(-34.597, 150.744),
map: map,
title:"Zdravo",
icon:"djole.png"//Change the icon of the marker
});
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(-34.290, 150.444),
map: map,
title:"Zdravo",
icon:"djole.png"//Change the icon of the marker
});
var markers = [];
markers.push(marker);
markers.push(marker2);
markers.push(marker3);
var markerCluster = new MarkerClusterer(map, markers);
}
Update
This is the error i see:
You need the MarkerClusterer or MarkerClustererPlus for Google API version 3. It looks like you are using MarkerClusterer for Google Maps API version 2.
First, I assume you have loaded all the needed libraries (included the one for the clustering) and you get no JS errors. If that is not so and you have doubts, please report all the errors you get and libraries you load.
Try to supply maxZoom level:
var markerCluster = new MarkerClusterer(map, markers, { maxZoom: 10 });
Then when you see the map, zoom out and check if it would group the markers.