13

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);
    }
});
Dr Rob Lang
  • 6,659
  • 5
  • 40
  • 60
numediaweb
  • 16,362
  • 12
  • 74
  • 110

2 Answers2

12

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!

Community
  • 1
  • 1
jcsmesquita
  • 166
  • 2
  • 9
0

I added second map in @jcsmesquita answer but there are same place cards on two maps : http://jsbin.com/vixehodaka/edit?html,css,js,output

so I changed javascript code a bit : jsbin.com/dezorezohe/edit?html,css,js,output

utarid
  • 1,642
  • 4
  • 24
  • 38