Team
i need some help in setting custom markers for google local search results.
Please check the below code. and let me know how i can get it working. the
bolded lines are the markers. i am not finding a way to change the marker
style.
google.load('maps' , '2');google.load('search' , '1'); // Global variables
we will set in OnLoadvar map;var marker;var searcher;// Second, we set up
our function, OnLoad function OnLoad() { // Get the content div and clear
it's current contents. var contentDiv =
document.getElementById('content');contentDiv.innerHTML = ''; // Clear any
content currently in the Div //
Next thing we have to do is build two divs to hold our stuff var
mapContainer = document.createElement('div'); // build the map
divmapContainer.style.height = '350px'; // set the map
heightmapContainer.style.width = '350px'; // set the map width var
controlContainer = document.createElement('div'); // build the control
divcontrolContainer.style.width = '350px'; // set the control width //
Now we have to add these divs to the content div in the document
bodycontentDiv.appendChild(mapContainer);contentDiv.appendChild(controlContainer);
//
We're ready to build our map... map = new
google.maps.Map2(mapContainer);map.setCenter(new google.maps.LatLng(lat , lng),
11);var loc = "453-463@Herndon@Pkwy|~Herndon|VA%|20170";var lat =
"38.9564565";var lng = "-77.3771416";var radius = "50";// Execute an initial
search
$.ajax({ type: "GET", url: "getrows.php", dataType: "json", //Passing
Current Location Details, Lat and Long along with Radius data:
"loc="+loc+"&lat="+lat+"&lng="+lng+"&radius="+radius, success:
function(response) { //resultElement.html(msg);
//$('#content').append(msg1); var jsArray=new
Array(response.length);for(i=0;i<response.length;i++){jsArray[i]=response[i];}//Read
from array nwo and show it in
textboxfor(i=0;i<jsArray.length;i++){obj=jsArray[i];var
text=$("#content");text.append(obj["title"]+"<br>"+obj["address"]+"<br>"+obj["city"]+","+obj["state"]+"<br>"+obj["phone"]+"<Br>");text.append("<a
href="+obj['linkurl']+"
target=_blank>directions</a><Br><br>"); var address =
obj["address"]+","+obj["city"]+","+obj["state"];* var point1 = new
google.maps.LatLng(parseFloat(obj["lat"]),parseFloat(obj["lng"]));** marker
= new google.maps.Marker(point1); // Create the
marker*marker.bindInfoWindow(address);map.addOverlay(marker);}}});// ...and add
a couple of controls.map.addControl(new google.maps.SmallMapControl()); // Add
a small map
control map.addControl(new google.maps.MapTypeControl()); // Add the map
type control // We'll wait to the end to actually initialize the map // So
let's build the search control var searchControl = new
google.search.SearchControl(); // Initialize a LocalSearch instance searcher
= new google.search.LocalSearch(); // create the
objectsearcher.setCenterPoint(map); // bind the searcher to the map //
Create a SearcherOptions object to ensure we can see all results var options
= new google.search.SearcherOptions(); // create the
objectoptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); //
Add the searcher to the SearchControl searchControl.addSearcher(searcher ,
options); // And second, we need is a search complete
callback!searchControl.setSearchCompleteCallback(searcher , function()
{//map.clearOverlays();var results = searcher.results; // Grab the results
arrayvar image = 'img/marker-images/image.png'; //
We loop through to get the points for (var i = 0; i < results.length; i++) {var
result = results[i]; // Get the specific resultvar markerLatLng = new
google.maps.LatLng(parseFloat(result.lat),parseFloat(result.lng)); * marker
= new google.maps.Marker(markerLatLng); // Create the marker* // Bind
information for the infoWindow aka the map marker
popupmarker.bindInfoWindow(result.html.cloneNode(true));result.marker = marker;
// bind the marker to the resultmap.addOverlay(marker); // add the marker to
the map}// Store where the map should be centeredvar center =
searcher.resultViewport.center; //
Calculate what the zoom level should be var ne = new
google.maps.LatLng(searcher.resultViewport.ne.lat,searcher.resultViewport.ne.lng);var
sw = new
google.maps.LatLng(searcher.resultViewport.sw.lat,searcher.resultViewport.sw.lng);var
bounds = new google.maps.LatLngBounds(sw, ne);var zoom =
map.getBoundsZoomLevel(bounds, new google.maps.Size(350, 350)); //
Set the new center of the map // parseFloat converts the lat/lng from a
string to a float, which is what // the LatLng constructor
takes.map.setCenter(new
google.maps.LatLng(parseFloat(center.lat),parseFloat(center.lng)),zoom); }); //
Draw the control searchControl.draw(controlContainer); // Set the map's
center point and finish! var address = loc.split("|"); var hnumberstreet =
address[0]; hnumberstreet = hnumberstreet.replace(/@/g," "); var city =
address[1]; city = city.replace(/~/g," "); var state = address[2]; state =
state.replace(/%/g," "); var zip = address[3]; var msg = "Starbucks Near
"+zip; searchControl.execute(msg); } google.setOnLoadCallback(OnLoad);
--
You received this message because you are subscribed to the Google Groups
"Google Maps API V2" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-api?hl=en.
