14

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);
    }
});
2
  • 1
    take a look at custom controls
    – Dr.Molle
    Oct 13, 2014 at 22:11
  • hi, were you able to find a solution to this?
    – Nicola
    Apr 30, 2015 at 10:30

2 Answers 2

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!

1
  • If you use google.maps.event.addListenerOnce, place card will be added just once. Seems to work fine. Jun 14, 2016 at 11:22
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.