Recreating Standard Google Map embed with Google Maps API

google-maps, google-maps-api-3, google-maps-markers

Solution

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.

Problem

Original source