numediaweb numediaweb - 1 year ago 156
Javascript Question

Google maps; add place card to marker

As you can see on the following image, the

div
(top left) shows the current marker address/directions/ save..

enter image description here

This was done using the embedded
iframe
code from google maps. But how can you do the same with custom "coded" map?

geocoder = new google.maps.Geocoder();

geocoder.geocode({
"address": nw.google_pointer
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {

var myOptions = {
zoom: parseInt(nw.google_zoom),
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: nw.google_pointer
});
} else {
console.log('Geocode was not successful for the following reason: ' + status);
}
});

Answer Source

jsbin with my solution

Background:

I needed a better solution to the mouse wheel scroll problem here and here. The best way to get the behaviour I wanted was to stick with the API, but I really like the card shown in the embedded version.

Method:

  1. Copied card code and associated css from embedded version.
  2. In javascript, append card html into the rendered map when it's ready

My Customizations:

  1. Took off the "Save" option because it doesn't work.
  2. Positioned card on the top right - look at the html that is appended in javascript, it's hardcoded with absolute position, you can change this or associate it with a class if you prefer.

Hope this works for you!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download