Current Location: Home> Latest Articles> Easily Create Interactive Map Markers Using PHP and AMap API

Easily Create Interactive Map Markers Using PHP and AMap API

M66 2025-07-17

Creating Interactive Map Markers with PHP and AMap API

In the era of mobile internet, map services have become an essential tool for users to access geographic information. Whether for locating places, planning routes, or exploring surroundings, maps offer great convenience. AMap API provides a rich set of interfaces that, combined with PHP's powerful backend capabilities, make it easy to build feature-rich interactive maps.

Preparation

First, register an AMap developer account, create a new web service application, and obtain your developer key, which is required to call the API.

Code Implementation

Below is the basic HTML structure and code for implementing interactive map markers:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Interactive Map Marker Example</title>
  <style>
    #map {
      width: 100%;
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>
  <script src="https://webapi.amap.com/ui/1.1/main.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    // Create map instance
    var map = new AMap.Map("map", {
      zoom: 13, // Set map zoom level
      center: [116.397428, 39.90923] // Set map center coordinates
    });

    // Add map toolbar control
    AMap.plugin(['AMap.ToolBar'], function() {
      map.addControl(new AMap.ToolBar());
    });

    // Map click event
    map.on('click', function(e) {
      // Get latitude and longitude of clicked point
      var lnglat = e.lnglat;
      var longitude = lnglat.getLng();
      var latitude = lnglat.getLat();

      // Create marker and add to map
      var marker = new AMap.Marker({
        position: [longitude, latitude]
      });
      map.add(marker);

      // Show info window with coordinates
      var infoWindow = new AMap.InfoWindow({
        content: 'Longitude: ' + longitude + '<br>Latitude: ' + latitude
      });
      marker.on('click', function() {
        infoWindow.open(map, marker.getPosition());
      });
    });
  </script>
</body>
</html>

Code Explanation

  • Include AMap and jQuery libraries to enable API usage.
  • Create a map instance with initial zoom and center settings.
  • Add a toolbar control for enhanced user interaction.
  • Listen for map click events to get coordinates.
  • Generate markers on the map at clicked locations.
  • Show a popup window with latitude and longitude when marker is clicked.

Important Notes

  • Replace YOUR_KEY with your actual developer key from AMap Open Platform.
  • Since AMap API uses HTTPS, deploy your webpage on an HTTPS-supported server to avoid browser security warnings.

Conclusion

This article demonstrates how to combine PHP with AMap API to implement a basic interactive map marker feature. Developers can build upon this foundation to add advanced functions such as route planning and location searching. Map technologies greatly enhance user experience by offering convenient geographic information display and interaction.

Related