I'm using the new Google Maps API v3.
It works great with Firefox/Chromo/Safari but the map doesn't load in IE6.
Any ideas why the page loads my map in all browsers except IE6?
Just replace this code
var marker = new google.maps.Marker({
position: point,
map: map,
icon: image,
});
to this
var marker = new google.maps.Marker({
position: point,
map: map,
icon: image
});
(line 509)
Related
currentPosition = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
var mapOptions = {
center: currentPosition,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions)
var home_marker = new google.maps.Marker({
position: currentPosition,
map: map,
icon: "../images/02_button_add.png"
});
Above is my code for google map API and trying to display a custom icon on map.
However, when I delete the icon file from folder. The map still show my icon.
Anyone knows what happen?
If you need to display another icon from same folder, you just change file name and hard reload your browser.
If you wish to display default google marker then remove icon property of marker from your code and hard reload your browser
Anyone know the URL to this icon, and if you can change the color on the most recent version of Google Maps API ?
I'd like a blue/green icon like below!
EDIT -----------------------------------------
I've found the markers here:
Markers With Text
scale = 2
text = AB
psize = 16
Green Marker
Red Marker
Google Development: Markers
You can custom everything with the API of google map.
To have a different pointer, you must add a specific code and give him the link to the icon you want to assign, and its position.
Something like this for exemple:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: iconBase + 'schools_maps.png'
});
Link to the documentation: https://developers.google.com/maps/tutorials/customizing/custom-markers
I hope it will be able to help you :)
Using Google's example code for detecting a user's location, I setup a basic page that detects a user's location on a map. I also setup a separate page that drops a marker on a map at a specific coordinate. I want to combine these functions into one script. That is, I want to drop a marker on the map at the location detected, but I can't seem to get it to work. My code detects the user's location, but doesn't drop a marker. I'm sure it's something simple, but I'm not familiar with Javascript, so I'm having trouble resolving the problem.
Below is Google's example code. What would I need to add to display the marker at initialLocation? I tried adding the following code:
var marker = new google.maps.Marker({
position: initialLocation,
map: map,
title: "You are here"
});
Try calling setMap() after you've created the marker:
var marker = new google.maps.Marker({
position: initialLocation,
map: map,
title: "You are here"
});
marker.setMap(map);
You can see the duplicated marker in the included image, the marker to the right is the correct marker, the one to the left is a clone of the other one, it is not in the right place it can not be clicked, and stays in the same position relative to the "real" marker reqardless of zoom level.
Here is the code that generates the marker:
var map = new google.maps.Map($(this.jobDiv).find(".map_canvas")[0], { 'zoom': 10, 'center': this.latlng, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'mapTypeControl': false, 'navigationControl': true, 'streetViewControl': false });
var marker = new google.maps.Marker({
map: map,
position: this.latlng,
title: this.markerLabel
});
Turns out this was a CSS issue, I set {overflow:hidden!important;}, on the div containing the google map, turns out I needed {overflow:hidden;}, and now its fine. I'm not sure how that caused the problem but it is fixed now.
Hi I am doing a project on Integration of google map v3.0. I finished the integration I am happy with the Output. The Problem is I was trying to change the RED Marker to Custom Marker. I have saved a marker in my solution. And was trying with this piece of code.
The Program is running but i am not getting any marker on the map(either red marker or custom marker). I tried in many blogs but couldnot find a solution.
Please anyone Help me Out.
var icon = new google.maps.MarkerImage("icon55.png");
var marker = new google.maps.Marker({
position: location,
map: map,
icon: icon
});
Thank You
This is how I have been doing markers with customer icons:
var marker = new google.maps.Marker({
position: latlng,
map: theMap,
title: title,
icon: icon
});
Here latlng is a google.maps.LatLng object, theMap is the google.maps.Map object, title is a string, icon is the url to the customer marker image.
Hope this helps.
Bob