So, having been recently somewhat dissapointed with lack of customizability of the regular google maps "embed" (iframe) code; I have started tinkering with the Google Maps API v3. Really, all I want to do is show a marker for a business on the map, so that you can click it and go to that "place" at mapsgoogle.com.
So pretty much, I just want to recreate the functionality of the iframe code below. I put in about an hour of reading the docs, but it seems extremely complicated just to get the marker associated with a 'place'
The place
https://maps.google.com/maps?cid=1311411133662139490
The standard Embed
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?cid=1311411133662139490&ie=UTF8&hq=&hnear=&t=m&iwloc=A&ll=41.097905,-73.405006&spn=0.006295,0.006295&output=embed"></iframe><br /><small>View Larger Map</small>
It appears as though there is no functionality in the api to use the cid.
To Elaborate a little
Generally I would use this just for small business websites. I was frustrated with the regular iframe embed and lack of customizability. Essentially I want a starting point from which I can play with stuff and heavily customize the look/feel, but have been unable to put a marker in that's associated with the data for a "place" - allowing for the little pop-up window, etc..
Honestly, I didn't really do enough research before asking this question - and came in with some misconceptions. I think, and I may be wrong, that the API is still what I want to be using ultimately, but had I know about the functionality in Rick's answer, I probably would have settled on that and procrastinated longer on learning the gmaps API.
Allow me to explain one option of achieving your goal. I use the marker and infoWindow objects that Google Maps API v3 offers, which you can find in the document I attached in the link. Feel free to follow along in the jsFiddle I created: http://jsfiddle.net/bgvYH/
First thing is first, you want to initiate your map with its options - I'm going to assume you know what the different variables in following code snippet represent:
var myLatlng = new google.maps.LatLng(41.097905,-73.405006);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
If you want to customize your map even more to your liking, have a look at the different options you can set in the API reference, you'll set these options in the myOptions object ( https://developers.google.com/maps/documentation/javascript/reference#MapOptions ).
Note: I set the center of the map to the Lat/Long coordinates of the restaurant - which I took from the URL you provided in the iframe ll=41.097905,-73.405006.
Now what you want to do next is determine the content you want to display in your infoWindow, so the restaurant information:
var contentString = "<div id='content'>";
contentString += "<div id='title'>Mr. Frosty's Deli and Grill</div>";
contentString += "<div id='info'><p>10 1st Street</p><p>Norwalk, CT 06855</p><p>(203) 956-5767</p><p><a href='http://thebeachburger.com/'>thebeachburger.com</a></p></div></div>";
You may even end up pulling this information from a database or JSON object in the future, depending on how deep you go into this project (for now I have it as static HTML).
Next we initialize the infoWindow object and set the contentString to the content option of the infoWindow. There are other options you can customize here (just like the map options, again look at the reference for InfoWindowOptions: https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions )
var infowindow = new google.maps.InfoWindow({
content: contentString
});
After setting up your infoWindow object, you initialize your marker object - which will place the drop the bubble on the map. Once again, you set up the options for the marker when initializing much like you did with the map object and the infoWindow object - you can further customize it to your liking by looking at the reference (I think there's even an option in there for the marker where you can use custom icons - you can get pretty creative here).
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Mr. Frosty's Deli and Grill"
});
And finally, you need to bind the Marker and the infoWindow together - so that when a user clicks on the marker the info pops up. This is achieved by using the event listener, and you listen for a "click" action on the marker variable. Read this document for information on events on google maps https://developers.google.com/maps/documentation/javascript/events. Likewise look through the API Reference for the different events you can listen to on an object.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
That should do it, you should have a working alternative to the iframe you include - except now you can customize the map and the actions you perform on it to however you want. In the jsFiddle I also included some styling, just to make things look nice inside the infoWindow.
Now, I want to let you know - I believe there is another option to what your looking for - but I have yet to experiment with this API. It is the Google Places API, which you'll have register for. But from what I read through the documents, I think you may be able to achieve what you want to do. Have a look at it ( https://developers.google.com/maps/documentation/places/ ), and see what's good.
It looks like this was created through 'My Places' and made public. If you don't want to mess with the API then that's your best bet.
Visit maps.google.com, click 'My Places' and 'Create Map'. Customize and grab the embed code.
If the map doesn't need to be interactive (beyond the click action), use a static map. It's just an image so you can wrap it in an anchor that points exactly where you want.
Related
I need a googlemap with clusters, popup and list where you can click on.
Hoping to find a simple solution which I can easily add markers and have a marker list which points to the marker on the map.
I have successfully used markercluster.js
Just load all your markers into a json (in my example they are in the variable locations), then load them:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
return marker;
});
If you look at the example code, it will show you how easy it is.
The Google Maps JS API documentation is as clear as it comes.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I don't think there's an off-the-shelf solution that looks exactly like your example. Getting that list is going to require some HTML work to position/render the module, and Javascript/DOM integration to sync it with the map. Some rudimentary front-end development is involved and if that's not something you want to tackle, perhaps you could just make a custom Google Map and link to it.
https://www.google.com/maps/about/mymaps/
Is is possible to add a business location marker WITH IT'S "DEFAULT" INFOWINDOW bubble like the ones in maps.google.com?
I'm making a contact page for a a company, where I have the GMaps element with a location and a marker, naturally.
Example:
Go to maps.google.com and search for "Colosseum" (for example, any "known" location/business will do). When you click the Colosseum marker, you get an infoWindow that has the business/sight/whatever info in the window (screenshot: https://dl.dropbox.com/u/1122582/colosseum.jpg)
What I want to see, is:
When I click the marker on my map on my webpage, it will open the same style (or atleast very similar) infoWindow as in the example (this means logo, address, direction links etc. whatever it has). InfoWindow being provided by the API options, and not handmade by me.
In pseudocode, I would imagine seeing it like this:
myMarker.onClick({
position: myBusinessLocation,
useDefaultInfoWindow: true
map: myMap
});
Worth noting that since coordinates are actually just coordinates and named locations, I would need to make the API understand the Marker points to a business, and not just a point in the map.
Requirements
Client-side API usage
WITHOUT the use of Google's IFRAME embedding
WITHOUT making a custom infoWindow that just looks like the one in the example. The whole point is that I would use the "default" infoWindow (if GMaps API even provides one)
There is no built-in method to create such an infoWindow with the desired content automatically.
That's the nature of an API, it has to offer the ability to create an application, but must not create an application automatically.
You have to create the infoWindow on your own by using e.g. the implemented infoWindow-object.
The contents of the infoWindow you also must collect on your own, you may retrieve the details for a place by using a Place-Details-Request
Does anyone know how to create a custom Google Maps infoWindow That will just open and fill over the map completely, instead of paning the map and setting the bubble over the marker? Basically, what I'd like to do is have my markers on the map, then when a user clicks on a marker, it just opens the content in a panel that fits the entire map itself. I looked at the options mentioned here: link but none of these seem to do what I'd like, they still open a "bubble" type of window. Has anyone done this or can someone point me in the right direction?
Creating your custom info window is not so difficult, but it's a little bit complicated.
If you want to find the easiest way, I recommend InfoBubble library.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
If you want to just prevent map panning when the infoWindow open, you can specify an option:
var infoWnd = new google.maps.InfoWindow({
disableAutoPan : true
});
I know that many of us are writing code to open an InfoWindow when a marker is clicked. But the InfoWindow will stay in place until the upper-right X is clicked, which means that setting the associated Markervisibility to false will create what is essentially an orphaned InfoWindow. And there could be multiple InfoWindow instances displayed on the Map at the same time. I guess it's simple enough for the user to just click the InfoWindow closed, but it feels like hiding the Marker should hide the associated InfoWindow.
I have started writing code like the following to deal with this scenario:
google.maps.event.addListener( marker, "click", function() {
var bubble = new google.maps.InfoWindow({
content: buildBubbleContent( param1, param2 )
});
bubble.open( map, marker );
//pretty standard stuff to here, but the next line is new (for me):
google.maps.event.addListenerOnce( marker, "visible_changed", function() {
bubble.close();
});
});
Is this what everyone else is doing? It feels like a design pattern that should be called a ListenBack. I've never seen the issue addressed in the Google Maps docs. I can't help but think that there must be a simpler mechanism built into the InfoWindow to take care of this automatically. Is there a standard way to do this that I have just missed?
For a single infoWindow I always create it as a global during map initialization. My click event starts with:
if(infoWindow != null){
infoWindow.close();
}
infoWindow.setPosition(mouseEvent.latLng);
infoWindow.setContent("....");
// etc
I'm marking this question as answered, because I have continued scouring the docs and looking at many code samples, but haven't found any other solutions. There is certainly no facility provided with the InfoWindow to automatically remove it from the map when the associated marker is turned off. If anyone finds a better option later, I will happily mark their solution as the better answer.
I am working on a prototype bike parking map for my school using Google Maps API.
I have saved all the bike rack locations in MYSQL with only attributes being lattitude
and longitude of the location. Now I'm trying to add a feature where when the users click
on the markers, they would show the pictures of the corresponding bike racks.
I am trying to do this using InfoWindow object.
Now the problem is, although InfoWindow is almost exclusively used with Markers, a Marker object cannot have an InfoWindow object as one of its properties/attributes.
So I was thinking creating a fresh new InfoWindow every time users click on markers. But i feel like it's going to create some lagging.
Another option I had in mind was creating another table or a column in the current table
which contains all the InfoWindow object.
However, I really want to make the InfoWindow objects to be part of Marker objects because
intuitively it makes the most sense.
Not saying the best way to do it is this, but a marker object sure can have an infoWindow as one of it's properties! Google's API doesn't restrict/throw errors when you put random properties/methods on it's marker objects. The following is perfectly valid code:
var someMarker = new google.maps.Marker(properties);
someMarker.infoWindow = new google.maps.InfoWindow(properties);
someMarker.infoWindow.setMap(map);
someMarker.infoWindow.open();
That being said, on a lot of google maps implantations there's generally only a single infoWindow object on the map. The reason for this if you opened up 4 or 5 infoWindows in a single map view, they tend to clutter up the map and you can't see any of the base map tiles anymore.
For that reason, you can have a single infoWindow object, and just change the contents of it, depending on which marker is clicked:
var yourGlobalInfoWindow = new google.map.InfoWindow(properties);
var someMarkerA = new google.maps.Marker(properties);
var someMarkerB = new google.maps.Marker(properties);
someMarkerA.infoWindowContent = 'some A HTML content here';
someMarkerB.infoWindowContent = 'some B HTML content here';
google.maps.event.addListener(someMarkerA,'click',function() { yourGlobalInfoWindow.setContent(someMarkerA.infoWindowContent); });
google.maps.event.addListener(someMarkerB,'click',function() { yourGlobalInfoWindow.setContent(someMarkerB.infoWindowContent); });
Note that the code above is for illustrative purposes only and is far from optimized or elegant, but it gets the point across.