this is code i use to initialize the map, nothing special.
function initializeMap() {
var mapArray = document.getElementById("latLong").value.split("_");
var latLng = new google.maps.LatLng(mapArray[0], mapArray[1]);
var mapOptions = {
center: latLng,
zoom: 10,
tilt: 30,
zoomControl: true,
panControl: false,
streetViewControl: true
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({ position: latLng, map: map, title: mapArray[2] });
}
latitude is -39.3455 and longitude is -8.0554. however when the map displays the marker is in the middle of the ocean, where point 0,0 is. Why is this happening? I tried a few browsers, nothing different. I tried to hardcode the values from a google example showing canada and I did see canada, however it does not want to work with my values.
Usually 0,0 will be displayed when the coordinates are not valid. Try to switch the order, maybe you made a mistake there.
Related
I am trying to mark some spots on a google map. I am using google maps places javascript api.
function initialize() {
var mapProp = {
center: new google.maps.LatLng(userlatitude, userlongitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);
map = new google.maps.Map(document.getElementById("midsection"), mapProp);
var mapPosition = new google.maps.LatLng(-20.997110, 123.375544);
markers.push(new google.maps.Marker({
position: {
lat: -20.014006,
lng: 123.421746
},
map: map,
title: 'Mow my lawn',
animation: google.maps.Animation.DROP
}));
(if the Long/Lat are invalid, its because I randomly changed it for the purpose of this post)
I can see the marker drop down and bounce once. But then it disappears. I have tried setting the Zindex, changing the display and position type of the div canvas. But nothing I do seems to make the marker stay.
The problem ended up being hidden in my CSS.
it was just a Canvas: display:none call
Hello guys I've got a simple question to ask, when I open my map I have set the lat and long to open some coords, then I place one marker with a infoBubble opening when the map is loaded, but after that the map opens in the maker position. I dont want that .. is it possible force the start location to open my map in the start position instead of the marker position?
thanks
function init() {
var mapCenter = new google.maps.LatLng(-8.799445,-63.922042);
map = new google.maps.Map( document.getElementById('map'), {
zoom: 17,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var myLatLng = new google.maps.LatLng(-8.802732,-63.921939);
var marker = new google.maps.Marker({ map: map,
position: myLatLng,
draggable: true,
icon: icon
});
}
By default the API when a InfoWindow will be opened tries to pan the map so that the infoWindow is fully visible.
Set the disableAutoPan-property of the infoWindow to true to avoid this.
How can I change the label for pins in an embedded google maps?
Ive figured out how to change the marker to my icon, but I need to restyle the A, B, C etc similar to how travelodge do for there map http://www.travelodge.co.uk/hotels/book/edinburgh-hotels
UPDATE this is the code that successfully uses a custom marker:
function addMarker(latlng, myTitle) {
markers.push(new google.maps.Marker({
position: latlng,
map: map,
title: myTitle,
icon: "www.linkto/myPin.png"
}));
}
Ive included markerwithlabel.js However this doesn't create any markers at all:
function addMarker(latlng, myTitle) {
markers.push(new MarkerWithLabel({
position: latlng,
map: map,
title: myTitle,
icon: "www.linkto/myPin.png",
labelContent: "$425K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels",
labelStyle: {opacity: 0.75}
}));
}
This is the code I was tying to adapt:
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/examples/basic.html
If you managed to change the marker icon, then you did all the work.
A marker does not have a label. What travelodge does is that it has markers for each letter and then sets them according to the search results.
EDIT:
It seems there's a special library to do what you want (go to "Styled Marker"):
http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel
To see the code click in "Development versions", then "Examples" and then look at the source code of the pages. Here's the Simple example code:
function initialize() {
var myLatLng = new google.maps.LatLng(37.313477473067, -121.880502070713);
var myOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"ff0000",text:"I'm a marker!"}),position:new google.maps.LatLng(37.383477473067, -121.880502070713),map:map});
var styleMaker1 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"00ff00",text:"A"}),position:myLatLng,map:map});
var styleMaker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"0000ff"}),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});
}
You can read more about markers on this link
I have two Google Maps setups on a site that I'm developing, and I want to apply custom markers to both of them. This is what I have written -
var coordinates_1 = new google.maps.LatLng(x, x);
var coordinates_2 = new google.maps.LatLng(x, x);
var map_1_options = {
zoom: 14,
center: coordinates_1,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map_2_options = {
zoom: 14,
center: coordinates_2,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var marker_1 = new google.maps.Marker({
position: coordinates_1,
map: map_1,
icon: '/images/marker.png'
});
var marker_2 = new google.maps.Marker({
position: coordinates_2,
map: map_2,
icon: '/images/marker.png'
});
var map_1 = new google.maps.Map(document.getElementById('location_1'), map_1_options);
var map_2 = new google.maps.Map(document.getElementById('location_2'), map_2_options);
I guess the script can be optimised but that's not the important issue here. What happens is I don't get any error messages (or missing images), and I get both maps displayed at their right location but no markers are showing. The images are 32x32px if that matters.
Any help would be appreciated.
You must first create map_1 and map_2 before you use them as map-property for the markers.
How to show marker? if it already exists in Google map. Link with marker http://maps.google.com/maps?&z=10&q=36.26577+-92.54324&ll=36.26577+-92.54324
and my function for initialization
function initialize() {
var latlng = new google.maps.LatLng(36.26577, -92.54324);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
var yourMarker = new google.maps.Marker({
'position': some_where.latLng,
'map': map,
'title': 'set map in option'
});
or
var yourMarker = new google.maps.Marker({
'position': some_where.latLng,
'title': 'set map later'
});
yourMarker.setMap(map)
Perhaps, what you seek can be done with the Places Api
http://code.google.com/apis/maps/documentation/places/
There are, however, some limitations on the number of requests per hour, per user.
In short: you search a particular LatLng point for nearby places. Then you receive a json (or xml) list of places, wich in turn can be transformed (by you) into markers on your map.