Creating a google map with store locations within 50 miles of user entered address. Have map & pinpoints showing correctly but all of the pinpoints just have a dot on them. I'd like to be able to label them A, B, C, D, etc so that I can list out locations & addresses in sidebar.
How would I do this? Here's the code I'm using to add my pinpoints.
var point = new GLatLng(latitude, longitude);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function () {
map.openInfoWindowHtml(point, myHtml);
});
map.addOverlay(marker);
Excellent, thanks. Included this js library.
http://code.google.com/p/gmaps-utility-library/
And then all I needed to do was update the
var marker = new GMarker(point);
to this
var newIcon = MapIconMaker.createLabeledMarkerIcon({label: "A", primaryColor: "#FD766A"});
var marker = new GMarker(point, {icon: newIcon});
Related
So, I found some instructions around and a few questions that seemed to answer this question, but none really worked for me or were very incomplete. I'm seeking a way to display the traditional google maps interaction of search and a pin is displayed on the map at the location. This marker, then, should be a blank option to include the data a user wants and the location saved to my database. I tried this sample by Google Dev and it worked for a custom click on the map, but the integration with a simple auto-complete search or even the google's own autocomplete search didn't quite worked.
I was wondering if there is a plugin or a technique (or a tutorial) that would suit this case (that I previously thought would be a simple matter as it is the traditional search on google maps). Thanks!
I can show you how I did this page http://www.a-zhotels.net/register, you could easily combine all the fields into one autocomplete address field. However, this should give you an idea.
First, create a function:
function getMapByGeoLocation() {
//build the address using many fields.
var postcode = $("#HotelPostcode").val();
var address = $("#HotelAddress").val();
var town = $("#HotelTown").val();
var city = $("#HotelCity").val();
var country = $("#HotelCountryId > option:selected").text();
var fulladdress = address + ', ' + town + ', ' + postcode + ', ' + city + ', ' + country;
geocoder.geocode(
{
'address': fulladdress
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location = results[0].geometry.location;
console.log(location);
//map and marker should be previously created
map.setCenter(location);
map.setZoom(14);
marker.setPosition(location);
//These 2 hidden inputs will be posted to the server
$("#HotelLatitude").val(location.Ya);
$("#HotelLongitude").val(location.Za);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
This function is then called when the textbox and dropdowns change:
$("#HotelTown, #HotelAddress, #HotelPostcode").change(getMapByGeoLocation);
See below the function that creates the map:
var map;
var marker;
var geocoder;
function createMap() {
if (map) { //Map already exists
return;
}
if (!$('#mapCanvas').is(':visible')) {
return;
}
var mapCanvas = $("#mapCanvas")[0];
var averageLatitude = $("#HotelLatitude").val();
var averageLongitude = $("#HotelLongitude").val();
map = new google.maps.Map(mapCanvas, {
streetViewControl: true,
zoom: 13,
scrollwheel: false,
center: new google.maps.LatLng(averageLatitude, averageLongitude)
});
geocoder = new google.maps.Geocoder();
//Associate the styled map with the MapTypeId and set it to display.
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
marker = new google.maps.Marker({
position: new google.maps.LatLng(averageLatitude, averageLongitude),
draggable: true,
map: map
});
google.maps.event.addListener(marker, "dragend", function () {
var position = marker.getPosition();
map.panTo(position);
$("#HotelLatitude").val(position.lat());
$("#HotelLongitude").val(position.lng());
});
google.maps.event.addListener(map, "center_changed", function () {
var position = map.getCenter();
marker.setPosition(position);
$("#HotelLatitude").val(position.lat());
$("#HotelLongitude").val(position.lng());
});
}
createMap();
I am not sure what exactly you are looking for.
If you are looking for autocomplete field that adds a marker to the map after the user entered some string and opens an infowindow with a form on the map, is may be something like that: http://jsfiddle.net/XG9Qj/2/
It is important to notice, that this example only places a marker on the map if the user selected one of the suggestions from the autocomplete. To allow him to enter an arbitrary string you have to watch the input for RETURN and use the google maps geocoder on your own(1).
var geocoder = new google.maps.Geocoder();
geocoder.geocode(...)
I am working in Google Map v3(actually migrating V2 to V3), and trying to customize the Infowindow of the Direction Service.
I am able to display the Direction using Origin, Destination and waypoints.
My Map displayed the route correctly with Marker (green marker with A, B, C... text).
By default, On click of teh marker infowindow will display address of that marker.
I want to customize it, so that on click of marker it should disply mini map of that location in Infowindow with more zoom.
I am able to do some progress, but the problem here is,
- Marker is changed to red pointing marker instead of Green marker (with A, B, C...text)
- whichever the marker I click, infowindow will open on the last marker
- Once marker is clicked it will display minimap, but on close and again click of that marker it will display address (default behaviour)
- my code is actually overwriting the green marker with red pointed marker
Can soboby help me how to fix all these issue
Below is my code:
function CreateDirection (arrWaypoints) {
if (!this.directions) {
this.directions = new google.maps.DirectionsService();
var origin = arrWaypoints[0];
var destination = arrWaypoints[arrWaypoints.length - 1];
var tripWaypoints = [];
for (var i = 1; i < arrWaypoints.length - 1; i++) {
tripWaypoints.push({
location: new google.maps.LatLng(arrWaypoints[i].hb, arrWaypoints[i].ib),
stopover: true
});
}
var myMap = MyMap.getMap();
var steps = [];
this.directions.route({
origin: origin,
destination: destination,
waypoints: tripWaypoints,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.METRIC
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay = new google.maps.DirectionsRenderer();
// directionDiv div element in my page
directionsDisplay.setPanel(document.getElementById("directionDiv"));
directionsDisplay.setMap(myMap);
directionsDisplay.setDirections(result);
}
});
}
}
function CreateMiniMapInfoWindow (wayPointsArray) {
for (var i = 0; i < wayPointsArray.length; i++) {
var myMap = MyMap.getMap();
var marker = new google.maps.Marker({
position: wayPointsArray[i],
map: myMap
});
google.maps.event.addListener(marker, 'click', function() {
var myOptionsMini = {
zoom: 14,
center: wayPointsArray[i],
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var infowindow = new google.maps.InfoWindow();
var minimap = new google.maps.Map(document.getElementById ("minimap"), myOptionsMini);
document.getElementById("minimap").style.display = 'block';
minimap.setCenter(marker.getPosition());
var minimapDiv = document.getElementById("minimap");
infowindow.setContent(minimapDiv);
infowindow.open(myMap, marker);
});
}
}
I need the solution for:
- How to get customized infowindow (with minimap) for all the markers
- How to put the green markers with text A, B, C...
Attached image is what I am getting from the above code
I hope my question is clear.
Please let me know if anyone have any inputs.
Thanks,
Sharath
Pass the following object as argument to the DirectionsRenderer:
{markerOptions:{clickable:false,zIndex:1000}}
It will have 2 effects:
the custom markers will be placed behind the A,B,C-markers created by the DirectionsRenderer(currently they are still present, but behind your custom markers)
the markers created by the DirectionsRenderer are not clickable, the underlying custom markers are able to receive the click.
another option(I would prefer it): set the suppressMarkers-option of the DirectionsRenderer to true and use the A,B,C-markers for your custom markers(e.g. https://maps.gstatic.com/mapfiles/markers2/marker_greenA.png , https://maps.gstatic.com/mapfiles/markers2/marker_greenB.png )
Related to the infoWindow: all you need is 1 infoWindow with 1 map for all markers. Observe the click-event of the markers and when it occurs open the infoWindow and center the map inside the infowindow at the markers position(may be retrieved inside the click-callback via this.getPosition())
Note: instead of using your predefined waypoints you better parse the route returned by the directionsService to place the custom markers at the exact positions(these may differ from your predefined waypoints)
I've seen many other people with the same question but couldn't find a answer.
I have a simple map I built using the Google Maps Javascript api v3.
The map has a few markers which are linked to an infowindow to display specific information for each marker.
I want to add a google chart to the infowindow but just couldn't figure out how to do it.
I went through every single post I could find (here and in other forums) and I've noticed other people trying to do something similar but seems that there's no specific answer.
I've noticed people are successful doing such thing using fusion tables, but this is not my case as I which to load the data from a MySQL table.
For now I have a simple map which the code is shown below:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.837342,151.208954),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var data = [
['Bondi Beach', -33.891044,151.275537],
['Cronulla Beach', -34.046544,151.159601],
];
var myLatLng1 = new google.maps.LatLng(-33.891044,151.275537);
var myLatLng2 = new google.maps.LatLng(-34.046544,151.159601);
var marker1 = new google.maps.Marker({
position: myLatLng1,
map: map
});
var marker2 = new google.maps.Marker({
position: myLatLng2,
map: map
});
google.maps.event.addListener(marker1, 'click', function() {
var infowindow1 = new google.maps.InfoWindow();
infowindow1.setContent('Display the chart here');
infowindow1.open(map, marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
var infowindow2 = new google.maps.InfoWindow();
infowindow2.setContent('Display the chart here');
infowindow2.open(map, marker1);
infowindow2.setContent('Display the chart here');
infowindow2.open(map, marker2);
});
}
and here is the code for a simple chart for example:
https://google-developers.appspot.com/chart/interactive/docs/quick_start
I've tried many different approaches and the one the seems more obvious to me was to add a container () within the setContent property of the InfoWindow and then call an external function which creates the chart. This doens't seems to work as the function can't see the container.
I've also tried to embed the entire code for the chart in the setContent property as suggested on this post:
using google chart tools in a google maps api infowindow content string
I've managed to execute the code with no errors, however nothing is shown.
Anotther approach would be create the chart in another html page and somehow set this page to the setContent property, also no success achieved.
I'm about to give up as I can't see a way of doing this.
I'd appreciate any help.
Thanks
Jose
This doens't seems to work as the function can't see the container.
You may pass the container as argument to drawChart()
But I guess you like to draw the chart populated with data related to the marker , so I would suggest to pass the marker as argument to drawChart() and create the infoWindow there.
Sample-code(without implementaion of marker-related data, as it's not clear what kind of data you like to draw)
function drawChart(marker) {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'Pizza sold # '+
marker.getPosition().toString(),
'width':300,
'height':200};
var node = document.createElement('div'),
infoWindow = new google.maps.InfoWindow(),
chart = new google.visualization.PieChart(node);
chart.draw(data, options);
infoWindow.setContent(node);
infoWindow.open(marker.getMap(),marker);
}
usage:
google.maps.event.addListener(marker1, 'click', function() {
drawChart(this);
});
Demo: http://jsfiddle.net/doktormolle/S6vBK/
i have displayed multiple pins in google map with infoWindows,and there location name displayed in html page, now i need this when click on any location name moving pins from one to another, and have show it's infoWindow.
so, is there any solution?
http://i53.tinypic.com/hvec15.jpg
Here is my code
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(51.50015, -0.12624), 13);
// Creates a marker at the given point
// Clicking the marker will hide it
var marker = new GMarker(new GLatLng(lat, longt));
map.addOverlay(marker);
function createMarker(latlng, number) {
var marker = new GMarker(latlng);
marker.value = number;
GEvent.addListener(marker,"click", function() {
var myHtml = number + "";
map.openInfoWindowHtml(latlng, myHtml);
});
return marker;
}
// Add 5 markers to the map at random locations
// Note that we don't add the secret message to the marker's instance data
var bounds = map.getBounds();
for (index in markers){
var n=markers[index];
var latlng = new GLatLng(n.lat,n.lng);
map.addOverlay(createMarker(latlng, n.name));
}
marker.openInfoWindowHtml(WINDOW_HTML);
}
}
hey i got it with google map_lib,
see demo: login to see demo
I have the following script to use the google maps API, I have to create a map that has more than one Marker (the balloon shaped icon pointing to something) and i need each of those markers to point on a different area of the map (i.e. different coordinates), how can i do it?
NOTE: I do not have latitude and longitude for the area on which marker has to be placed instead I have the address of the area on which marker has to be placed.
The code to display multiple markers on Google map is given below but it does not work as expected!
var map = null;
var geocoder = null;
function initializeNew() {
var allAddress = document.getElementById("HiddenField1").value;
var testary = new Array();
testary = allAddress.split("|");
if (GBrowserIsCompatible()) {
//calls map to appear inside <div> with id, "map_canvas"
map = new GMap2(document.getElementById("map_canvas"));
//adds zoom and arrow controls to map
//map.addControl(new GSmallMapControl());
var marker = null;
var i = 0;
for (i = 0; i < testary.length; i++) {
address = testary[i];
geocoder = new GClientGeocoder();
//converts a street address into geocode for the api
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
marker = new GMarker(point);
map.addOverlay(marker);
map.setMapType(G_HYBRID_MAP);
//adds your own marker title and description in html
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
//Add click event on push pin to open info window on click of the icon
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
});
//Provides map,satellite,hybrid and terrain views in the map along with zoom control
map.setUIToDefault();
}
}
)
}
}
}
I have stored address of group of items in an array and looped to display markers in the map. This displays only one marker for the last address present in the array. Please correct this code or provide new code to display multiple markers in Google map by providing address.
I ran into this exact same problem and fixed it. Look at the code that I have used. The specific bits are that marker needs to be an array and when you open the infowindow the content needs to be stored in the marker array. I would also suggest that you use something JSON instead which is easier to parse instead of separating with '|'.
try this: put var in front of marker
else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
map.setMapType(G_HYBRID_MAP);
//adds your own marker title and description in html
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
//Add click event on push pin to open info window on click of the icon
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address</p><p class='para1'>" + address + "</p>");
});
UPDATE
var geocoder = new GClientGeocoder();
var addresses = ["new york","chicago"];
var curIndex = 0;
function showAddress() {
var _cur = addresses[curIndex];
geocoder.getLatLng(
_cur,
function(point) {
if (!point) {
alert(_cur + " not found");
} else {
console.log(_cur+":"+point);
}
//do next after done
curIndex++;
if(curIndex<addresses.length)
showAddress();
}
);
}
showAddress();
</script>